사용 태그를 통해 포함하려고 할 때를 제외하고 모든 브라우저에서 훌륭하게 작동하는 4 슬라이스 크기 조정 SVG 이미지가 있습니다. 그렇다면 크롬, 파이어 폭스, 사파리에서는 제대로 작동하지만, < = IE11에서는 그렇지 않습니다.IE에서 'use'링크 내의 SVG에 대한 ClipPath
문제는 클립 경로에있는 것 같습니다. IE에서이 작업을 수행하기 위해 누락되었거나 지원되지 않는 항목이 있습니까? 그렇지 않다면 IE와 비슷한 방식으로 동일한 효과를 얻을 수있는 방법이 있습니까?
감사합니다. 내가 부모 컨테이너에 visibility: hidden;
또는 position: absolute;
를 사용하는 경우 내가 display: none;
같은과 용기의 주요 SVG를 숨기고있어 때문에 문제가 일어나고
#box,
#use {
width: 200px;
height: 50px;
}
#use {
fill: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display: none;">
<svg id="box" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
\t <defs>
\t \t <symbol id="topleft" viewBox="0 0 500 500">
\t \t \t <path d="M3.1,22.6c0,0.2,0,0.4,0,477.4H5C5,22.9,5,22.5,5,22.6c0-4.3,0-7.9,0.1-8.8C5.1,11.5,5,8.2,6.2,6.1
\t \t \t c0.4-0.6,40.8-0.8,80.2-0.9c0.5,0,413.6,0,413.6,0V3.4c0,0-413.3,0-413.6,0C47.5,3.4,8.2,3.6,6.7,4C6.5,3,6.6,2,6.5,1
\t \t \t C6.4,0.3,5.7-0.1,5,0c-0.7,0.1-1,0.8-1,1.4C4.2,2.2,4.2,3,4.2,3.7C3.4,3.9,2.7,4.2,1.9,4.4c-1.5,0.3-1,2.7,0.5,2.4
\t \t \t C2.9,6.6,3.5,6.4,4,6.3C3.5,7.8,3.5,9.7,3.4,11C3.3,12,3.1,19.8,3.1,22.6z"/>
\t \t </symbol>
\t \t <symbol id="topright" viewBox="0 0 500 500">
\t \t \t <use xlink:href="#topleft"/>
\t \t </symbol>
\t \t <symbol id="bottomleft" viewBox="0 0 500 500">
\t \t \t <path d="M5.3,494.5C5,493.1,5,484.3,5,477.4L5,0H3.1l0,477.4c-0.1,7.2,0,15.3,0.4,17.2c-0.8,0.1-1.7,0.1-2.5,0.3
\t \t \t c-0.6,0.2-1.1,0.7-1,1.4c0.1,0.6,0.8,1.1,1.4,1c0.6-0.2,1.3-0.2,1.9-0.2c0,0.2-0.2,1.5-0.3,1.7C3,499.4,3.7,500,4.3,500
\t \t \t c0.7,0,1.2-0.5,1.3-1.1c0-0.1,0.3-2.3,0.3-2.3c1.8,0.4,4.2,0.3,5.3,0.4c0.9,0.1,37.6,0.2,75.2,0.3c0.3,0,413.6,0,413.6,0v-2.1
\t \t \t c0,0-413.3,0-413.6,0C46.8,495.2,6,495,5.3,494.5z"/>
\t \t </symbol>
\t \t <symbol id="bottomright" viewBox="0 0 500 500">
\t \t \t <use xlink:href="#bottomleft"/>
\t \t </symbol>
\t \t \t
\t \t <clipPath id="crop">
\t \t \t <rect class="mask" width="100%" height="100%" x="0"/>
\t \t </clipPath>
\t </defs>
\t <svg width="50%" height="50%">
\t \t <use xlink:href="#topleft" width="500" height="500" class="box_border__tl"/>
\t </svg>
\t <!-- top right: -->
\t <g transform="scale(-1, 1)">
\t \t <svg width="50%" height="50%" x="-100%" y="0">
\t \t \t <use xlink:href="#topright" width="500" height="500" class="box_border__tr"/>
\t \t </svg>
\t </g>
\t <!-- bottom left: -->
\t <g transform="scale(1, -1)">
\t \t <svg width="50%" height="50%" x="0" y="-100%" clip-path="url(#crop)">
\t \t \t <use xlink:href="#bottomleft" width="500" height="500" y="-500" transform="scale(1, -1)" class="box_border__bl"/>
\t \t </svg>
\t </g>
\t <!-- bottom right: clip-path="url(#crop)" -->
\t <g transform="scale(-1, -1)">
\t \t <svg width="50%" height="50%" x="-100%" y="-100%" clip-path="url(#crop)">
\t \t \t <use xlink:href="#bottomright" width="500" height="500" y="-500" transform="scale(1, -1)" class="box_border__br"/>
\t \t </svg>
\t </g>
</svg>
</div>
<svg id="use" class="box" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
\t <use xlink:href="#box"/>
</svg>
"display : none"을 사용할 수 없다면 "width : 0; height : 0;"을 사용할 수 있습니다. 및 "position : absolute"로 설정되므로 페이지 흐름에 영향을 미치지 않습니다. 크기가 0 인 경우 문제가 발생하면 절대 위치 지정을 시도하고 페이지에서 왼쪽으로 이동하십시오 (예 : 왼쪽 : -9999px 등). –