gpt4 book ai didi

css - SVG在ie11中没有高度

转载 作者:行者123 更新时间:2023-11-28 12:01:01 25 4
gpt4 key购买 nike

我在使用 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>

最佳答案

所以事实证明,如果没有明确设置高度,ie11 将渲染所有 150px 高度的 svg。

我设法解决了这个问题,方法是计算出高度与宽度的比率,然后使用 jquery 在页面加载时获取 svg 的宽度,然后应用计算来设置显式高度。

关于css - SVG在ie11中没有高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46057801/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com