2
我有一个SVG，它的高度是不影响这导致其他元素的一些奇怪的位置父容器问题没有高度。SVG在IE11
这里是一个Fiddle。如果你在ie11中打开它，你可以看到现在这些圆圈延伸到灰色框的外部，而不是像灰色框一样使灰色框变大。
我曾尝试加入这个到SVG作为建议的另一个问题是：preserveAspectRatio="xMinYMin slice"但它并没有什么不同。
我也试着设置方式不同的宽度和高度，但仍然没有奏效。
* {
box-sizing: border-box;
}
body {
background: #fff;
}
.row--flex {
background: #dedede;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.col--6-12 {
width: 50%;
}
.selector-block {
padding-right: 45px;
padding-left: 45px;
}
.selector-block .col--flex-col {
justify-content: center;
}
.selector-block .col--flex-col > * {
flex: 0;
}
.selector-block .col--6-12:first-of-type {
padding-right: 45px;
}
.selector-block .col--6-12:last-of-type {
padding-left: 45px;
}
.selector-block__icons {
position: relative;
max-width: 575px;
margin: 0 auto;
text-align: center;
}
.selector-block__title {
position: absolute;
pointer-events: none;
transform: translateX(-50%);
}
.selector-block__title--join {
top: 30%;
left: 33%;
}
.selector-block__title--learn {
top: 56%;
left: 72%;
}
.selector-block__title--connect {
top: 76%;
left: 28%;
}
.selector-block__title.open {
color: #fff;
}
.selector-block__text {
display: none;
}
.selector-block__text--mia {
display: block;
}
.selector-icons {
max-width: 575px;
width: 100%;
}
.selector-icon {
display: block;
cursor: pointer;
}
.selector-icon--connect .selector-icon__img {
fill: #e0b83b;
}
.selector-icon--learn .selector-icon__img {
fill: #51bab4;
}
.selector-icon--join .selector-icon__img {
fill: #6e5bb2;
}
.selector-icon--selected .selector-circle {
opacity: 1;
}
.selector-icon--selected .selector-icon__img {
fill: #fff;
}
.selector-circle {
opacity: 0.3;
transition: all 400ms;
}
.selector-circle--connect {
bottom: 0;
right: 48%;
}
.selector-circle--connect .selector-circle__img {
fill: #e0b83b;
}
.selector-circle--learn {
top: 50%;
left: 48%;
transform: translateY(-50%);
}
.selector-circle--learn .selector-circle__img {
fill: #51bab4;
}
.selector-circle--join {
top: 0;
right: 48%;
}
.selector-circle--join .selector-circle__img {
fill: #6e5bb2;
}<div class="row row--contained row--flex p--b-100 selector-block bg--white">
<div class="col--6-12 col__m--12-12">
<div class="selector-block__icons">
<svg version="1.1" class="selector-icons" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
\t width="100%" height="100%" viewBox="0 0 572.17188 595.41016" preserveAspectRatio="xMinYMin slice">
<a class="selector-icon selector-icon--join">
\t <g class="selector-circle">
\t \t <g>
\t \t \t <defs>
\t \t \t \t <rect id="SVGID_1_" x="27.46826" width="323.42432" height="323.41992"/>
\t \t \t </defs>
\t \t \t <clipPath id="SVGID_2_">
\t \t \t \t <use xlink:href="#SVGID_1_" overflow="visible"/>
\t \t \t </clipPath>
\t \t \t <path clip-path="url(#SVGID_2_)" fill="#6F5CA8" d="M350.89453,161.71094c0,89.31152-72.40088,161.71289-161.71338,161.71289
\t \t \t \t c-89.31201,0-161.71387-72.40137-161.71387-161.71289c0-89.3125,72.40186-161.71289,161.71387-161.71289
\t \t \t \t C278.49365-0.00195,350.89453,72.39844,350.89453,161.71094"/>
\t \t </g>
\t </g>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M203.63818,99.52637c-0.82422,0-1.49414-0.6709-1.49414-1.49219
\t \t c0-0.82324,0.66992-1.49316,1.49414-1.49316h28.03516c1.46191,0,2.80273,0.5957,3.77734,1.57129h0.01563
\t \t c0.95898,0.97363,1.56738,2.32617,1.56738,3.78809v58.00977c0,1.47754-0.59277,2.81836-1.56738,3.79395l-0.10547,0.08887
\t \t c-0.96289,0.91602-2.25781,1.47754-3.6875,1.47754H146.5874c-1.46191,0-2.81836-0.59277-3.77734-1.56641
\t \t c-0.97461-0.97559-1.58203-2.31641-1.58203-3.79395v-58.00977c0-1.47656,0.60742-2.81445,1.56641-3.78809h0.01563h-0.01563
\t \t c0.97461-0.97559,2.33105-1.58789,3.79297-1.58789h28.03613c0.83789,0,1.50879,0.67188,1.50879,1.50977
\t \t c0,0.82129-0.6709,1.49219-1.50879,1.49219H146.5874c-0.63867,0-1.23242,0.27344-1.67578,0.70215
\t \t c-0.42578,0.4248-0.68164,1.01758-0.68164,1.67188v58.00977c0,0.63867,0.25586,1.25195,0.68164,1.67578
\t \t c0.44336,0.4248,1.03711,0.70215,1.67578,0.70215h85.08594c0.62305,0,1.18945-0.26172,1.61328-0.65527l0.0625-0.04688
\t \t c0.42578-0.42383,0.70215-1.02148,0.70215-1.67578v-58.00977c0-0.6543-0.27637-1.24707-0.70215-1.67188
\t \t c-0.44043-0.42871-1.03711-0.70215-1.67578-0.70215H203.63818z"/>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M187.20459,149.7959c-0.83789,0-1.50977-0.66602-1.50977-1.48828
\t \t c0-0.82324,0.67188-1.49316,1.50977-1.49316h23.19336c0.83789,0,1.50781,0.66992,1.50781,1.49316
\t \t c0,0.82227-0.66992,1.48828-1.50781,1.48828H187.20459z"/>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M187.20459,142.07715c-0.83789,0-1.50977-0.6709-1.50977-1.50879
\t \t c0-0.82227,0.67188-1.49316,1.50977-1.49316h36.73438c0.83789,0,1.50781,0.6709,1.50781,1.49316
\t \t c0,0.83789-0.66992,1.50879-1.50781,1.50879H187.20459z"/>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M187.20459,134.3418c-0.83789,0-1.50977-0.6709-1.50977-1.50879
\t \t c0-0.82227,0.67188-1.49316,1.50977-1.49316h36.73438c0.83789,0,1.50781,0.6709,1.50781,1.49316
\t \t c0,0.83789-0.66992,1.50879-1.50781,1.50879H187.20459z"/>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M187.20459,126.60352c-0.83789,0-1.50977-0.6709-1.50977-1.50488
\t \t c0-0.82227,0.67188-1.49316,1.50977-1.49316h36.73438c0.83789,0,1.50781,0.6709,1.50781,1.49316
\t \t c0,0.83398-0.66992,1.50488-1.50781,1.50488H187.20459z"/>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M166.50732,123.60547c2.54492,0,4.8457,1.03223,6.51855,2.70898
\t \t h0.01465c1.67578,1.67676,2.69824,3.98926,2.69824,6.51855c0,2.54199-1.03711,4.8584-2.69824,6.53418h-0.01465
\t \t c-1.66211,1.67285-3.97363,2.70996-6.51855,2.70996c-2.54297,0-4.8584-1.03711-6.51953-2.70996h-0.01172
\t \t c-1.66016-1.67578-2.69824-3.99219-2.69824-6.53418s1.03809-4.8418,2.69824-6.51855h0.01172
\t \t C161.66455,124.6377,163.96436,123.60547,166.50732,123.60547 M170.92334,128.41602
\t \t c-1.12695-1.12695-2.69336-1.8125-4.41602-1.8125c-1.7207,0-3.27148,0.70215-4.40234,1.8125l-0.01172,0.0166
\t \t c-1.13086,1.12598-1.81348,2.67773-1.81348,4.40039c0,1.71875,0.68262,3.29102,1.81348,4.41699h0.01172
\t \t c1.13086,1.12695,2.68164,1.8252,4.40234,1.8252c1.72266,0,3.28906-0.69824,4.41602-1.8252
\t \t c1.12695-1.12598,1.8291-2.69824,1.8291-4.41699c0-1.72266-0.70215-3.29004-1.8291-4.40039V128.41602z"/>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M158.771,149.79688c-0.82227,0-1.49219-0.66699-1.49219-1.48926
\t \t c0-0.82324,0.66992-1.49316,1.49219-1.49316h15.47461c0.82227,0,1.49219,0.66992,1.49219,1.49316
\t \t c0,0.82227-0.66992,1.48926-1.49219,1.48926H158.771z"/>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M203.63818,107.26172c-0.82422,0-1.49414-0.6709-1.49414-1.49316
\t \t c0-0.81836,0.66992-1.48926,1.49414-1.48926h7.73438c0.82227,0,1.49414,0.6709,1.49414,1.48926v7.73926
\t \t c0,0.82227-0.67188,1.49316-1.49414,1.49316h-44.46875c-0.83789,0-1.50781-0.6709-1.50781-1.49316v-7.73926
\t \t c0-0.83496,0.66992-1.50488,1.50781-1.50488h7.71973c0.82324,0,1.50879,0.66992,1.50879,1.50488
\t \t c0,0.82227-0.68555,1.49316-1.50879,1.49316h-6.22559v4.7373h41.48145v-4.7373H203.63818z"/>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M182.36279,69.46387h13.53613
\t \t c0.82227,0,1.49316,0.66992,1.49316,1.49316v34.8125c0,0.82129-0.6709,1.49219-1.49316,1.49219h-13.53613
\t \t c-0.82227,0-1.49414-0.6709-1.49414-1.49219v-34.8125C180.86865,70.13379,181.54053,69.46387,182.36279,69.46387
\t \t M194.40967,72.46582h-10.53906v31.79785h10.53906V72.46582z"/>
\t <path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M191.65283,78.69238c0,1.3877-1.12695,2.51465-2.51465,2.51465
\t \t c-1.38477,0-2.50977-1.12695-2.50977-2.51465c0-1.38379,1.125-2.51074,2.50977-2.51074
\t \t C190.52588,76.18164,191.65283,77.30859,191.65283,78.69238"/>
</a>
<a class="selector-icon selector-icon--learn">
\t <g class="selector-circle">
\t \t <g>
\t \t \t <defs>
\t \t \t \t <rect id="SVGID_3_" x="248.74756" y="159.10059" width="323.42432" height="323.41992"/>
\t \t \t </defs>
\t \t \t <clipPath id="SVGID_4_">
\t \t \t \t <use xlink:href="#SVGID_3_" overflow="visible"/>
\t \t \t </clipPath>
\t \t \t <path clip-path="url(#SVGID_4_)" fill="#52BBB5" d="M572.17383,320.80957c0,89.31152-72.40039,161.71289-161.71289,161.71289
\t \t \t \t s-161.71338-72.40137-161.71338-161.71289c0-89.3125,72.40088-161.71289,161.71338-161.71289
\t \t \t \t S572.17383,231.49707,572.17383,320.80957"/>
\t \t </g>
\t </g>
\t <path class="selector-icon__img" d="M452.68945,268.54102l-40.10156-14.75c-4.37891-1.61328-9.2168-1.61328-13.5957,0l-37.56641,14.52051
\t \t c-3.22656,1.15137-5.07031,4.14746-5.07031,7.375c0,3.22559,2.07422,5.99121,5.07031,7.14355l40.10156,14.75
\t \t c2.07422,0.69141,4.37891,1.15234,6.68164,1.15234c2.30664,0,4.60938-0.46094,6.45313-1.38379l9.21875-3.45703
\t \t c1.15234-0.46094,1.8457-1.84277,1.38477-2.99512s-1.8457-1.84375-2.99609-1.38379l-9.2207,3.45801
\t \t c-2.99414,1.15234-6.45117,1.15234-9.9082,0l-40.10156-14.51953c-1.84375-0.69141-2.07422-2.30371-2.07422-2.76465
\t \t s0.23047-2.30566,2.07422-2.99609l37.56641-14.29004c3.22656-1.15234,6.91406-1.38184,10.37109,0l40.09961,14.75
\t \t c1.38281,0.23047,2.07422,1.15234,2.07422,2.53613c0,1.38184-0.92188,2.53418-2.30469,2.99414l-16.13281,6.22363l-24.42969-9.91016
\t \t c-0.69141-0.92188-2.30273-1.61328-4.37695-1.61328c-2.53516,0-4.60938,1.15234-4.60938,2.30566
\t \t c0,1.15137,1.84375,2.07324,4.14844,2.30371l26.96289,10.83203v28.57813c-2.76367,0.92188-4.60938,3.45703-4.60938,6.45313
\t \t c0,3.91797,2.99609,6.91309,6.91406,6.91309s6.91406-2.99512,6.91406-6.91309c0-2.53516-1.38281-4.84082-3.68555-5.99219
\t \t c1.8418-1.15332,3.68555-2.53516,5.07031-3.68848c0.46094-0.46094,0.68945-1.15137,0.68945-1.6123v-18.4375
\t \t c0-1.38281-0.92188-2.30469-2.30273-2.30469c-1.38281,0-2.30664,0.92188-2.30664,2.30469v17.28516
\t \t c-0.68945,0.69043-1.38281,1.15234-2.30469,1.61328v-23.96875l15.44141-5.76172c3.22656-1.15332,5.30078-4.14941,5.30078-7.375
\t \t C457.75977,272.45898,455.68555,269.69336,452.68945,268.54102 M434.71289,326.3877c-1.38281,0-2.30469-0.92188-2.30469-2.30469
\t \t s0.92188-2.30371,2.30469-2.30371c1.38477,0,2.30664,0.9209,2.30664,2.30371S436.09766,326.3877,434.71289,326.3877"/>
\t <path class="selector-icon__img" d="M420.42383,320.16504c-4.60742,1.15234-9.21875,1.61328-13.36523,1.61328
\t \t c-11.52344,0-25.12109-4.37891-32.26563-10.37109v-17.28418c0-1.38281-0.92188-2.30469-2.30469-2.30469
\t \t s-2.30469,0.92188-2.30469,2.30469v18.4375c0,0.69043,0.23047,1.38281,0.69141,1.61328
\t \t c8.98828,8.06543,24.89063,12.21484,36.18359,12.21484c4.37891,0,9.44727-0.69238,14.28906-1.84473
\t \t c1.15039-0.23047,2.07227-1.6123,1.61133-2.76563C422.73047,320.62598,421.57617,319.7041,420.42383,320.16504"/>
</a>
<a class="selector-icon selector-icon--connect">
\t <g class="selector-circle">
\t \t <g>
\t \t \t <defs>
\t \t \t \t <rect id="SVGID_5_" y="271.98047" width="323.42188" height="323.42969"/>
\t \t \t </defs>
\t \t \t <clipPath id="SVGID_6_">
\t \t \t \t <use xlink:href="#SVGID_5_" overflow="visible"/>
\t \t \t </clipPath>
\t \t \t <path clip-path="url(#SVGID_6_)" fill="#E0B83B" d="M323.42578,433.69727c0,89.3125-72.40088,161.71289-161.71338,161.71289
\t \t \t \t C72.40088,595.41016,0,523.00977,0,433.69727c0-89.31152,72.40088-161.71289,161.7124-161.71289
\t \t \t \t C251.0249,271.98438,323.42578,344.38574,323.42578,433.69727"/>
\t \t </g>
\t </g>
\t <path class="selector-icon__img" d="M192.06689,374.06055h-12.22168v-5.07422c0-1.14648-0.93359-2.0791-2.0791-2.0791
\t \t c-1.14746,0-2.08008,0.93262-2.08008,2.0791v5.07422h-25.55176v-5.07422c0-1.14648-0.93359-2.0791-2.08008-2.0791
\t \t s-2.08008,0.93262-2.08008,2.0791v5.07422h-12.2207c-3.88086,0-7.03711,3.15527-7.03711,7.03418v57.76563
\t \t c0,3.87988,3.15625,7.03613,7.03711,7.03613h58.31348c3.87988,0,7.03613-3.15625,7.03613-7.03613v-57.76563
\t \t C199.10303,377.21582,195.94678,374.06055,192.06689,374.06055 M130.87451,392.52441h64.06934v46.33594
\t \t c0,1.58594-1.29004,2.87695-2.87695,2.87695h-58.31348c-1.58789,0-2.87891-1.29102-2.87891-2.87695V392.52441z M148.0542,384.27148
\t \t c1.14648,0,2.08008-0.93359,2.08008-2.0791v-3.97266h25.55176v3.97266c0,1.14551,0.93262,2.0791,2.08008,2.0791
\t \t c1.14551,0,2.0791-0.93359,2.0791-2.0791v-3.97266h12.22168c1.58691,0,2.87695,1.28906,2.87695,2.875v7.27051h-64.06934v-7.27051
\t \t c0-1.58594,1.29102-2.875,2.87891-2.875h12.2207v3.97266C145.97412,383.33789,146.90771,384.27148,148.0542,384.27148"/>
\t <path class="selector-icon__img" d="M138.70068,416.73438h9.90332c1.14746,0,2.08008-0.93359,2.08008-2.0791v-9.35449
\t \t c0-1.14648-0.93262-2.08008-2.08008-2.08008h-9.90332c-1.14648,0-2.08008,0.93359-2.08008,2.08008v9.35449
\t \t C136.62061,415.80078,137.5542,416.73438,138.70068,416.73438 M146.5249,412.5752h-5.74414v-5.19531h5.74414V412.5752z"/>
\t <path class="selector-icon__img" d="M157.9585,416.73438h9.90332c1.14746,0,2.0791-0.93359,2.0791-2.0791v-9.35449
\t \t c0-1.14648-0.93164-2.08008-2.0791-2.08008h-9.90332c-1.14746,0-2.08008,0.93359-2.08008,2.08008v9.35449
\t \t C155.87842,415.80078,156.81104,416.73438,157.9585,416.73438 M160.03662,407.37988h5.74609v5.19531h-5.74609V407.37988z"/>
\t <path class="selector-icon__img" d="M177.76611,416.73438h9.90332c1.14648,0,2.08008-0.93359,2.08008-2.0791v-9.35449
\t \t c0-1.14648-0.93359-2.08008-2.08008-2.08008h-9.90332c-1.14746,0-2.08008,0.93359-2.08008,2.08008v9.35449
\t \t C175.68604,415.80078,176.61865,416.73438,177.76611,416.73438 M179.84521,407.37988h5.74609v5.19531h-5.74609V407.37988z"/>
\t <path class="selector-icon__img" d="M138.70068,435.99121h9.90332c1.14746,0,2.08008-0.93164,2.08008-2.0791v-9.35254
\t \t c0-1.14746-0.93262-2.08008-2.08008-2.08008h-9.90332c-1.14648,0-2.08008,0.93262-2.08008,2.08008v9.35254
\t \t C136.62061,435.05957,137.5542,435.99121,138.70068,435.99121 M146.5249,431.83301h-5.74414v-5.19531h5.74414V431.83301z"/>
\t <path class="selector-icon__img" d="M157.9585,435.99121h9.90332c1.14746,0,2.0791-0.93164,2.0791-2.0791v-9.35254
\t \t c0-1.14746-0.93164-2.08008-2.0791-2.08008h-9.90332c-1.14746,0-2.08008,0.93262-2.08008,2.08008v9.35254
\t \t C155.87842,435.05957,156.81104,435.99121,157.9585,435.99121 M160.03662,426.6377h5.74609v5.19531h-5.74609V426.6377z"/>
\t <path class="selector-icon__img" d="M177.76611,435.99121h9.90332c1.14648,0,2.08008-0.93164,2.08008-2.0791v-9.35254
\t \t c0-1.14746-0.93359-2.08008-2.08008-2.08008h-9.90332c-1.14746,0-2.08008,0.93262-2.08008,2.08008v9.35254
\t \t C175.68604,435.05957,176.61865,435.99121,177.76611,435.99121 M179.84521,426.6377h5.74609v5.19531h-5.74609V426.6377z"/>
</a>
</svg>
<p class="selector-block__title selector-block__title--join heading--2">Join</p>
<p class="selector-block__title selector-block__title--learn heading--2">Learn</p>
<p class="selector-block__title selector-block__title--connect heading--2">Connect</p>
</div>
</div>
<div class="col--6-12 col__m--12-12 col--flex-col">
<div class="selector-block__text selector-block__text--mia open" id="mia">
<p>Lorem ipsum dolor sit amet, no purto sonet utinam has. Ex his duis aperiri facilisi, labores nominavi reprimique cum ne, ad torquatos suscipiantur definitionem sea. Aeque nobis salutandi ei quo, nec et dicam definitiones. Nec ei harum adipisci, reque justo ius eu. Nec an prima ceteros scribentur, dicta soluta ponderum no mel. Alii molestiae referrentur no pro.</p>
</div>
</div>
</div>
不明确的，从你的问题和拨弄你希望看到...像路径或长方形等SVG元素......不定位的CSS ... SVG（可缩放矢量图形）什么相对坐标定位在viewBox属性中定义.... css flex规则不适用..... eg。
您可以在小提琴中看到如果您使用预览的大小窗口，svg将根据需要放大或缩小以填充可用宽度。它的高度也会改变，并影响父灰色框的高度（这是我想要发生的事情）。但是，在IE11中，svg的高度不会自动缩放，而是因为我没有设置明确的高度而保持为150px（浏览器默认）。这意味着svg中的路径延伸出灰色框，而不是使灰色框变大。 –