SVG 在 Mac Safari 中不可见

Question

我创建了一个 svg 并在 <svg><use xlink="#id"></use></svg> 中使用它。

在除 Mac Safari 之外的所有浏览器中都可以。

<svg class="progress" x="0px" y="0px" viewBox="0 0 55.917 59.667">
    <use xlink:href="#progressSVG"></use>   
</svg>

<svg version="1.1" class="hide" x="0px" y="0px" width="55.917px" height="59.667px" viewBox="0 0 55.917 59.667" enable-background="new 0 0 55.917 59.667" xml:space="preserve">
<g id="progressSVG">
    <polygon points="1.083,35.417 20.083,16.583 27.249,23.336 46.313,4.999 43.208,2.042 55.917,0 53.802,12.167 50.521,9.385 27.458,32.792 20.25,25.667 6.208,40.292 "/>
    <rect x="0" y="44.667" width="14.917" height="15"/>
    <rect x="20.62" y="37.667" width="14.917" height="22"/>
    <rect x="40.537" y="27.667" width="14.917" height="32"/>
</g>
</svg>


.hide{
display:none;
}
.progress{
width:150px;
height:150px;
}

Answer 1

Safari 似乎有一个错误，其中 <use> 仅当指向的内容位于同一 SVG 片段中时才有效，例如

.progress{
width:150px;
height:150px;
}

<svg class="progress" x="0px" y="0px" viewBox="0 0 55.917 59.667">
  <defs>
  <g id="progressSVG">
    <polygon points="1.083,35.417 20.083,16.583 27.249,23.336 46.313,4.999 43.208,2.042 55.917,0 53.802,12.167 50.521,9.385 27.458,32.792 20.25,25.667 6.208,40.292 "/>
    <rect x="0" y="44.667" width="14.917" height="15"/>
    <rect x="20.62" y="37.667" width="14.917" height="22"/>
    <rect x="40.537" y="27.667" width="14.917" height="32"/>
</g>
    </defs>
<use xlink:href="#progressSVG"></use>   
</svg>

SVG 在 Mac Safari 中不可见

SVG not visible in Mac Safari

css

safari

svg