Question

我通过该元素广泛使用SVG，并且在大多数浏览器（Chrome，FF，Opera，Android Chrome和浏览器）中都很好。然而，Safari（8 Mac OSX，iOS8），尤其是渲染它们的问题。

具体问题是虽然SVG似乎占据了文档中的空间，但实际上没有任何内容可见。我还试图填写SVG，并针对不同的背景检查了几个，以确保不是问题。

以下是“源”SVG的示例，它位于结束</body>之前，将在文档的另一部分通过<use>引用。

<div class="vh">
    <!-- inject:svg --><svg xmlns="http://www.w3.org/2000/svg"><symbol id="youtube-icon" viewBox="0 0 512 512"><path fill="#fff" d="M129.86 50h24.736l16.933 63.55L187.264 50h24.95l-28.58 94.504v64.486H159.08v-64.486L129.86 50zm81.244 129.74c0 20.667 10.8 31.427 31.95 31.427 17.537 0 31.35-11.73 31.35-31.428v-57.49c0-18.357-13.675-31.51-31.35-31.51-19.205 0-31.95 12.692-31.95 31.51v57.49zm22.44-55.556c0-6.42 2.956-11.184 9.08-11.184 6.69 0 9.55 4.622 9.55 11.184v54.555c0 6.384-3.254 11.103-9.122 11.103-6.022 0-9.508-4.926-9.508-11.104v-54.556zm99.805-32.478v89.025c-2.658 3.33-8.57 8.784-12.822 8.784-4.666 0-5.81-3.186-5.81-7.902V91.706h-21.805v98.03c0 11.585 3.543 20.948 15.232 20.948 6.598 0 15.755-3.433 25.203-14.64v12.946h21.806V91.706H333.35zm-32.077 240.428c1.48 1.954 2.22 4.815 2.22 8.583v57.672c0 3.56-.6 6.126-1.798 7.697-2.29 2.996-7.246 2.86-10.625 1.15-1.59-.8-3.227-2.11-4.916-3.927v-69.607c1.41-1.533 2.835-2.67 4.28-3.403 3.636-1.84 8.328-1.482 10.84 1.834zm69.91-2.53c-7.696 0-9.278 5.415-9.278 13.09v11.308h18.347v-11.307c0-7.55-1.602-13.09-9.07-13.09zM434.515 412c0 27.614-22.386 50-50 50H127.484c-27.614 0-50-22.386-50-50V285.684c0-27.615 22.386-50 50-50h257.03c27.615 0 50 22.385 50 50V412zM161.734 295.128h24.195V273.15h-71.78v21.978h24.196v129.44h23.388v-129.44zm83.19 17.743h-20.768v84.786c-2.534 3.174-8.163 8.365-12.21 8.365-4.443 0-5.532-3.032-5.532-7.526V312.87h-20.768v93.36c0 22.664 15.367 22.803 26.56 16.39 4.142-2.375 8.122-5.838 11.95-10.382v12.33h20.768V312.87zm79.942 26.59c0-15.15-5.037-28-20.247-28-7.417 0-13.78 4.727-18.466 10.437V273.15h-20.97v151.418h20.97v-8.586c5.79 7.22 12.12 9.998 19.725 9.998 13.817 0 18.986-10.733 18.986-24.555V339.46zm76.758 3.44c0-20.187-9.627-32.852-29.55-32.852-18.734 0-31.543 13.463-31.543 32.853v50.137c0 20.107 10.142 34.557 29.972 34.557 21.884 0 31.122-13.034 31.122-34.557v-8.39H380.25v7.763c0 9.725-.51 15.625-9.276 15.625-8.36 0-9.07-7.246-9.07-15.625v-21.07h39.72V342.9z"></path></symbol></svg><!-- endinject -->
</div>

以下是同一HTML页面中该符号的引用：

<svg class="svg-icon social_links__icon" aria-labelledby="title" role="img">
       <title>Twitter</title>
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon"></use>
</svg>

我见过similar question，但建议的答案并没有解决我的问题。

我尝试过添加身高＆amp;源SVG元素的宽度，源模式和<svg>周围的<use>包装器，似乎都没有影响。

包装器.social_links__icon上的类<svg>添加了以下样式：

display: block;
height: 24px;
width: 66px;

感谢任何帮助。

Answer 1

我已设法找到问题的解决方案，因此我将此处发布给可能遇到同样问题的其他人。

我的来源<svg>包含在HTML文档的末尾，就在结束<body>标记和引用模式的<use>之前。我尝试将它移到开头的<body>标记下方，然后就可以了。

似乎Safari不允许<use>引用文档的后续部分。我不确定这是否是浏览器错误，但一旦知道问题就很难解决。

我刚刚找到an article which has the same solution。

Safari，Inline SVG＆amp; <使用>

1 个答案: