css - SVG 在 Mac Safari 中不可见

Question

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

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

here's a link .

<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>