2

为什么我的内联 svg 无法在 Safari（桌面和移动设备）上正确显示？

我正在尝试在几个 WordPress 网站上使用内联 svg 图形。内联 svg 的原因之一是能够设置图形样式，而无需手动执行，然后将图形作为文件上传。

由于我是 svg 的新手，我确信代码中会有一些错误，但总体而言，它似乎适用于不同的浏览器/分辨率等。只有在 Safari 上，svg 无法正确显示。它不是水平居中显示，而是显示为偏移到图形的一部分的右侧切割。实际上，它看起来好像第一个符号居中，尽管这可能是巧合。

如果我稍微玩一下视图框，我可以让它像它应该的那样居中 - 但是 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>

任何帮助表示赞赏！

4

1 回答 1

0

为使用元素添加宽度和高度：

<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”将始终具有属性“宽度”和“高度”的显式值。如果在“use”元素上提供了属性“width”和/或“height”，那么这些属性将被传输到生成的“svg”。如果未指定属性“width”和/或“height”，则生成的“svg”元素将为这些属性使用“100%”值。

于 2020-08-31T13:03:13.667 回答