为什么我的内嵌svg无法在Safari（台式机和移动设备）上正确显示？
我正在尝试在几个WordPress网站上使用内嵌svg图形。内嵌svg的原因之一是能够对图形设置样式，而无需手动进行处理，然后将图形作为文件上传。
由于我是svg的新手，所以我确定代码中会出现一些错误，但是总体来说，它似乎可以在不同的浏览器/分辨率下使用。仅在Safari上，svg不能正确显示。而不是显示为水平居中，而是相对于图形的一部分右切显示。实际上，第一个符号ist居中，尽管这可能是巧合。
如果我稍微使用一下视图框，则可以使它居中放置，但是应该不会在其他浏览器上正确显示svg。
知道我哪里出错了吗？是我的代码错误还是Safari的已知错误？
<p style="font-size: 2.3em; text-align: center;"><a href="#"><svg width="135px" viewBox="0 0 563 301" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-top: 16px;">
<!--Definition of one volunteer symbol -->
<symbol id="volunteer" width="200" height="301" viewBox="0 0 200 301" style="fill: var(--color-1);">
<circle id="head" cx="101" cy="30" r="30" />
<path id="body" d="M189.34,44.94c-9.88,10.26-20.74,21.77-31.9,33-4.46,4.49-9.1,9.16-14.49,12.3-8.16,4.76-9.64,11.23-9.58,20.06q.66,86.7.15,173.4c0,5.13-2.44,11.54-6,14.91-2.55,2.39-9.93,2.33-13.37.32s-6.17-7.77-6.24-11.93c-.52-32.66-.28-65.33-.38-98,0-7.29-3.35-10.29-8.38-7.19-2.06,1.26-3,5.73-3,8.74-.15,32.09.07,64.17,0,96.26,0,11.05-7.79,16.8-17.68,13.4-6.87-2.36-8.51-7.92-8.5-14.48Q70,245,70,204.23c0-33-.16-65.91.09-98.86,0-5.46-1.76-8.62-5.82-12.3C45.4,76,27.09,58.43,8.67,41a48,48,0,0,1-4.84-6.1c-4.29-5.66-5.9-11.47.1-16.92,5.29-4.79,12.59-3.43,18.37,2.52,12.07,12.42,24.54,24.46,36.47,37C77.05,76.7,99.14,79,123.19,72.41a27.75,27.75,0,0,0,11.08-6.48C149.65,51.56,165,37.11,179.78,22.15c7.77-7.86,14.16-8.68,21.88-1.1,0,0,3.34,2.5-.66,9.5Z" />
</symbol>
<!-- Setting the symbols in place - left, middle, right -->
<use xlink:href="#volunteer" x="0" y="0" style="opacity:1.0" />
<use xlink:href="#volunteer" x="180" y="0" style="opacity:.4" />
<use xlink:href="#volunteer" x="360" y="0" style="opacity:1.0" />
</svg></a></p>
<h3 style="text-align: center;"><a href="#">Headline</a></h3>
<p style="text-align: center;">Lorem ipsum <a href="#">Link text</a></p>任何帮助表示赞赏！
向use元素添加宽度和高度：
<p style="font-size: 2.3em; text-align: center;"><a href="#">
<svg width="135px" viewBox="0 0 563 301" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" style="padding-top: 16px;">
<!--Definition of one volunteer symbol -->
<symbol id="volunteer" viewBox="0 0 200 301" style="fill: var(--color-1);">
<circle id="head" cx="101" cy="30" r="30" />
<path id="body" d="M189.34,44.94c-9.88,10.26-20.74,21.77-31.9,33-4.46,4.49-9.1,9.16-14.49,12.3-8.16,4.76-9.64,11.23-9.58,20.06q.66,86.7.15,173.4c0,5.13-2.44,11.54-6,14.91-2.55,2.39-9.93,2.33-13.37.32s-6.17-7.77-6.24-11.93c-.52-32.66-.28-65.33-.38-98,0-7.29-3.35-10.29-8.38-7.19-2.06,1.26-3,5.73-3,8.74-.15,32.09.07,64.17,0,96.26,0,11.05-7.79,16.8-17.68,13.4-6.87-2.36-8.51-7.92-8.5-14.48Q70,245,70,204.23c0-33-.16-65.91.09-98.86,0-5.46-1.76-8.62-5.82-12.3C45.4,76,27.09,58.43,8.67,41a48,48,0,0,1-4.84-6.1c-4.29-5.66-5.9-11.47.1-16.92,5.29-4.79,12.59-3.43,18.37,2.52,12.07,12.42,24.54,24.46,36.47,37C77.05,76.7,99.14,79,123.19,72.41a27.75,27.75,0,0,0,11.08-6.48C149.65,51.56,165,37.11,179.78,22.15c7.77-7.86,14.16-8.68,21.88-1.1,0,0,3.34,2.5-.66,9.5Z" />
</symbol>
<!-- Setting the symbols in place - left, middle, right -->
<use xlink:href="#volunteer" x="0" y="0" width="200" height="301" style="opacity:1.0" />
<use xlink:href="#volunteer" x="180" y="0" width="200" height="301" style="opacity:.4" />
<use xlink:href="#volunteer" x="360" y="0" width="200" height="301" style="opacity:1.0" />
</svg></a></p>
<h3 style="text-align: center;"><a href="#">Headline</a></h3>
<p style="text-align: center;">Lorem ipsum <a href="#">Link text</a></p>https://www.w3.org/TR/SVG11/struct.html#UseElement
引用的“符号”及其内容被深层克隆到生成的树中，但用“ svg”代替了“符号”。生成的“ svg”将始终具有属性“ width”和“ height”的显式值。如果在'use'元素上提供了'width'和/或'height'属性，则这些属性将被转移到生成的'svg'中。如果未指定属性“宽度”和/或“高度”，则生成的“ svg”元素将为这些属性使用值“ 100％”。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句