为什么我的内嵌 svg 在 Safari（桌面和移动设备）上无法正确显示？
Why is my inline svg not displayed properly on Safari (desktop and mobile)?
为什么我的内联 svg 在 Safari（桌面和移动）上无法正确显示？
我正在尝试在几个 WordPress 网站上使用内联 svg 图形。使用内联 svg 的原因之一是无需手动设置图形样式然后将图形作为文件上传的能力。
由于我是 svg 的新手，我敢肯定代码中会有一些错误，但总的来说它似乎适用于不同的 browsers/resolutions 等。只有在 Safari 上 svg 才能正确显示.它不是水平居中显示，而是显示为向右切割图形的一部分。实际上它看起来好像第一个符号居中，虽然这可能是巧合。
如果我稍微调整一下 viewbox，我可以让它像它应该的那样居中 - 但是 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>
感谢任何帮助！
为使用元素添加宽度和高度：
<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
引用的“symbol”及其内容 deep-cloned 进入生成的树，除了“symbol”被“svg”替换。此生成的“svg”将始终具有属性“宽度”和“高度”的明确值。如果在“use”元素上提供属性“width”and/or“height”，那么这些属性将被传输到生成的“svg”。如果未指定属性“宽度”and/or“高度”，则生成的“svg”元素将为这些属性使用值“100%”。
为什么我的内联 svg 在 Safari（桌面和移动）上无法正确显示？
我正在尝试在几个 WordPress 网站上使用内联 svg 图形。使用内联 svg 的原因之一是无需手动设置图形样式然后将图形作为文件上传的能力。
由于我是 svg 的新手，我敢肯定代码中会有一些错误，但总的来说它似乎适用于不同的 browsers/resolutions 等。只有在 Safari 上 svg 才能正确显示.它不是水平居中显示，而是显示为向右切割图形的一部分。实际上它看起来好像第一个符号居中，虽然这可能是巧合。
如果我稍微调整一下 viewbox，我可以让它像它应该的那样居中 - 但是 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>
感谢任何帮助！
为使用元素添加宽度和高度：
<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
引用的“symbol”及其内容 deep-cloned 进入生成的树，除了“symbol”被“svg”替换。此生成的“svg”将始终具有属性“宽度”和“高度”的明确值。如果在“use”元素上提供属性“width”and/or“height”，那么这些属性将被传输到生成的“svg”。如果未指定属性“宽度”and/or“高度”，则生成的“svg”元素将为这些属性使用值“100%”。