Question

这是我在svg图像上的一个标签，它在除Safari之外的所有浏览器上都能正常工作，它不会出现，我无法理解为什么这部分svg没有出现.... / p>

<g>
  <g>
       <defs>
    <rect id="SVGID_7_" x="221.463" y="851.163" width="187.789" height="38.692"></rect>
       </defs>
       <clipPath id="SVGID_8_">
            <use xlink:href="#SVGID_7_" overflow="visible"></use>
       </clipPath>
       <path clip-path="url(#SVGID_8_)" fill="#120F0B" d="M221.463,862.222c0-2.149,1.755-3.904,3.902-3.904h76.462 c2.146,0,5.144-1.242,6.662-2.759l3.254-3.255c1.52-1.52,4.003-1.522,5.522-0.003l3.255,3.258 c1.521,1.517,4.516,2.759,6.665,2.759h78.164c2.146,0,3.902,1.755,3.902,3.904v23.73c0,2.146-1.756,3.903-3.902,3.903H225.365c-2.147,0-3.902-1.757-3.902-3.903V862.222z"/>
   </g>
   <text transform="matrix(1 0 0 1 277.3213 876.9551)" fill="#FFFFFF" font-family="'FedraSansStd-Normal'" font-size="9.64">Drinkwaterbalans</text>
</g>

这是顶部的svg标记：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="600px" height="1000px" viewBox="0 0 625 1000"
     enable-background="new 0 0 625 1000" xml:space="preserve" 
     preserveAspectRatio="xMinYMin none">

Answer 1

找到了答案！

如果我删除了：

<defs>
       <rect id="SVGID_7_" x="221.463" y="851.163" width="187.789" height="38.692"></rect></defs>
<clipPath id="SVGID_8_">
       <use xlink:href="#SVGID_7_" overflow="visible"></use>
</clipPath>

即使在Safari中，图形也会出现！并纠正

Answer 2

Stackoverflow中已经提到过这个问题。您可以参考此链接获取答案。 Not able to render SVG image in Safari

Answer 3

您需要将SVG声明放在SVG标记之前。在<g>标记后添加<body>标记，并将<svg>标记放在<g>标记之后。

SVG图像不会出现在Safari中

3 个答案: