为什么我的内嵌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,96.26,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,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,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,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>
感谢您的帮助！