【发布时间】：2018-02-13 21:59:53
【问题描述】：
我遇到了一个 svg 的问题，它的高度不会影响父容器，这会导致其他元素出现一些奇怪的位置。
这是Fiddle。如果你在 ie11 中打开它，你可以看到圆圈现在延伸到灰色框之外，而不是像在 chrome 中那样使灰色框变大。
我已尝试按照另一个问题的建议将其添加到 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"
width="100%" height="100%" viewBox="0 0 572.17188 595.41016" preserveAspectRatio="xMinYMin slice">
<a class="selector-icon selector-icon--join">
<g class="selector-circle">
<g>
<defs>
<rect id="SVGID_1_" x="27.46826" width="323.42432" height="323.41992"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_)" fill="#6F5CA8" d="M350.89453,161.71094c0,89.31152-72.40088,161.71289-161.71338,161.71289
c-89.31201,0-161.71387-72.40137-161.71387-161.71289c0-89.3125,72.40186-161.71289,161.71387-161.71289
C278.49365-0.00195,350.89453,72.39844,350.89453,161.71094"/>
</g>
</g>
<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
c0-0.82324,0.66992-1.49316,1.49414-1.49316h28.03516c1.46191,0,2.80273,0.5957,3.77734,1.57129h0.01563
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
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
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
c0.97461-0.97559,2.33105-1.58789,3.79297-1.58789h28.03613c0.83789,0,1.50879,0.67188,1.50879,1.50977
c0,0.82129-0.6709,1.49219-1.50879,1.49219H146.5874c-0.63867,0-1.23242,0.27344-1.67578,0.70215
c-0.42578,0.4248-0.68164,1.01758-0.68164,1.67188v58.00977c0,0.63867,0.25586,1.25195,0.68164,1.67578
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
c0.42578-0.42383,0.70215-1.02148,0.70215-1.67578v-58.00977c0-0.6543-0.27637-1.24707-0.70215-1.67188
c-0.44043-0.42871-1.03711-0.70215-1.67578-0.70215H203.63818z"/>
<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
c0-0.82324,0.67188-1.49316,1.50977-1.49316h23.19336c0.83789,0,1.50781,0.66992,1.50781,1.49316
c0,0.82227-0.66992,1.48828-1.50781,1.48828H187.20459z"/>
<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
c0-0.82227,0.67188-1.49316,1.50977-1.49316h36.73438c0.83789,0,1.50781,0.6709,1.50781,1.49316
c0,0.83789-0.66992,1.50879-1.50781,1.50879H187.20459z"/>
<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
c0-0.82227,0.67188-1.49316,1.50977-1.49316h36.73438c0.83789,0,1.50781,0.6709,1.50781,1.49316
c0,0.83789-0.66992,1.50879-1.50781,1.50879H187.20459z"/>
<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
c0-0.82227,0.67188-1.49316,1.50977-1.49316h36.73438c0.83789,0,1.50781,0.6709,1.50781,1.49316
c0,0.83398-0.66992,1.50488-1.50781,1.50488H187.20459z"/>
<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
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
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
c-1.66016-1.67578-2.69824-3.99219-2.69824-6.53418s1.03809-4.8418,2.69824-6.51855h0.01172
C161.66455,124.6377,163.96436,123.60547,166.50732,123.60547 M170.92334,128.41602
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
c-1.13086,1.12598-1.81348,2.67773-1.81348,4.40039c0,1.71875,0.68262,3.29102,1.81348,4.41699h0.01172
c1.13086,1.12695,2.68164,1.8252,4.40234,1.8252c1.72266,0,3.28906-0.69824,4.41602-1.8252
c1.12695-1.12598,1.8291-2.69824,1.8291-4.41699c0-1.72266-0.70215-3.29004-1.8291-4.40039V128.41602z"/>
<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
c0-0.82324,0.66992-1.49316,1.49219-1.49316h15.47461c0.82227,0,1.49219,0.66992,1.49219,1.49316
c0,0.82227-0.66992,1.48926-1.49219,1.48926H158.771z"/>
<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
c0-0.81836,0.66992-1.48926,1.49414-1.48926h7.73438c0.82227,0,1.49414,0.6709,1.49414,1.48926v7.73926
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
c0-0.83496,0.66992-1.50488,1.50781-1.50488h7.71973c0.82324,0,1.50879,0.66992,1.50879,1.50488
c0,0.82227-0.68555,1.49316-1.50879,1.49316h-6.22559v4.7373h41.48145v-4.7373H203.63818z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M182.36279,69.46387h13.53613
c0.82227,0,1.49316,0.66992,1.49316,1.49316v34.8125c0,0.82129-0.6709,1.49219-1.49316,1.49219h-13.53613
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
M194.40967,72.46582h-10.53906v31.79785h10.53906V72.46582z"/>
<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
c-1.38477,0-2.50977-1.12695-2.50977-2.51465c0-1.38379,1.125-2.51074,2.50977-2.51074
C190.52588,76.18164,191.65283,77.30859,191.65283,78.69238"/>
</a>
<a class="selector-icon selector-icon--learn">
<g class="selector-circle">
<g>
<defs>
<rect id="SVGID_3_" x="248.74756" y="159.10059" width="323.42432" height="323.41992"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_4_)" fill="#52BBB5" d="M572.17383,320.80957c0,89.31152-72.40039,161.71289-161.71289,161.71289
s-161.71338-72.40137-161.71338-161.71289c0-89.3125,72.40088-161.71289,161.71338-161.71289
S572.17383,231.49707,572.17383,320.80957"/>
</g>
</g>
<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
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
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
c1.15234-0.46094,1.8457-1.84277,1.38477-2.99512s-1.8457-1.84375-2.99609-1.38379l-9.2207,3.45801
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
s0.23047-2.30566,2.07422-2.99609l37.56641-14.29004c3.22656-1.15234,6.91406-1.38184,10.37109,0l40.09961,14.75
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
c-0.69141-0.92188-2.30273-1.61328-4.37695-1.61328c-2.53516,0-4.60938,1.15234-4.60938,2.30566
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
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
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
c0-1.38281-0.92188-2.30469-2.30273-2.30469c-1.38281,0-2.30664,0.92188-2.30664,2.30469v17.28516
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
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
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"/>
<path class="selector-icon__img" d="M420.42383,320.16504c-4.60742,1.15234-9.21875,1.61328-13.36523,1.61328
c-11.52344,0-25.12109-4.37891-32.26563-10.37109v-17.28418c0-1.38281-0.92188-2.30469-2.30469-2.30469
s-2.30469,0.92188-2.30469,2.30469v18.4375c0,0.69043,0.23047,1.38281,0.69141,1.61328
c8.98828,8.06543,24.89063,12.21484,36.18359,12.21484c4.37891,0,9.44727-0.69238,14.28906-1.84473
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">
<g class="selector-circle">
<g>
<defs>
<rect id="SVGID_5_" y="271.98047" width="323.42188" height="323.42969"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_6_)" fill="#E0B83B" d="M323.42578,433.69727c0,89.3125-72.40088,161.71289-161.71338,161.71289
C72.40088,595.41016,0,523.00977,0,433.69727c0-89.31152,72.40088-161.71289,161.7124-161.71289
C251.0249,271.98438,323.42578,344.38574,323.42578,433.69727"/>
</g>
</g>
<path class="selector-icon__img" d="M192.06689,374.06055h-12.22168v-5.07422c0-1.14648-0.93359-2.0791-2.0791-2.0791
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
s-2.08008,0.93262-2.08008,2.0791v5.07422h-12.2207c-3.88086,0-7.03711,3.15527-7.03711,7.03418v57.76563
c0,3.87988,3.15625,7.03613,7.03711,7.03613h58.31348c3.87988,0,7.03613-3.15625,7.03613-7.03613v-57.76563
C199.10303,377.21582,195.94678,374.06055,192.06689,374.06055 M130.87451,392.52441h64.06934v46.33594
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
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
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
c0-1.58594,1.29102-2.875,2.87891-2.875h12.2207v3.97266C145.97412,383.33789,146.90771,384.27148,148.0542,384.27148"/>
<path class="selector-icon__img" d="M138.70068,416.73438h9.90332c1.14746,0,2.08008-0.93359,2.08008-2.0791v-9.35449
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
C136.62061,415.80078,137.5542,416.73438,138.70068,416.73438 M146.5249,412.5752h-5.74414v-5.19531h5.74414V412.5752z"/>
<path class="selector-icon__img" d="M157.9585,416.73438h9.90332c1.14746,0,2.0791-0.93359,2.0791-2.0791v-9.35449
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
C155.87842,415.80078,156.81104,416.73438,157.9585,416.73438 M160.03662,407.37988h5.74609v5.19531h-5.74609V407.37988z"/>
<path class="selector-icon__img" d="M177.76611,416.73438h9.90332c1.14648,0,2.08008-0.93359,2.08008-2.0791v-9.35449
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
C175.68604,415.80078,176.61865,416.73438,177.76611,416.73438 M179.84521,407.37988h5.74609v5.19531h-5.74609V407.37988z"/>
<path class="selector-icon__img" d="M138.70068,435.99121h9.90332c1.14746,0,2.08008-0.93164,2.08008-2.0791v-9.35254
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
C136.62061,435.05957,137.5542,435.99121,138.70068,435.99121 M146.5249,431.83301h-5.74414v-5.19531h5.74414V431.83301z"/>
<path class="selector-icon__img" d="M157.9585,435.99121h9.90332c1.14746,0,2.0791-0.93164,2.0791-2.0791v-9.35254
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
C155.87842,435.05957,156.81104,435.99121,157.9585,435.99121 M160.03662,426.6377h5.74609v5.19531h-5.74609V426.6377z"/>
<path class="selector-icon__img" d="M177.76611,435.99121h9.90332c1.14648,0,2.08008-0.93164,2.08008-2.0791v-9.35254
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
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 规则不适用......例如。
.... -
您可以在小提琴中看到，如果您使用预览窗口的大小，svg 将根据需要放大或缩小以填充可用宽度。它的高度也会改变，并影响父灰盒的高度（这是我想要发生的）。但是，在 IE11 中，svg 的高度不会自动缩放，而是保持设置为 150px（浏览器默认值），因为我没有设置明确的高度。这意味着 svg 中的路径会延伸到灰色框之外，而不是让灰色框变大。
标签： css internet-explorer svg