SVG未出现在Firefox中

我在HTML页面中嵌入了SVG。一切工作正常，但不是与Firefox ...
我读过，Firefox是相当严格的解释SVGs，所以我尝试了很多东西，以使我的SVG完美。但据火狐是不够的......
这是它的一部分，没有所有的路径（和试之前的事情就可以了）：
SVG未出现在Firefox中

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="320" height="86" viewBox="0 0 320 86"> 
    <defs> 
     <style type="text/css"> 
      .cls-1 { 
       fill: transparent; 
       fill-rule: evenodd; 
       stroke: #fff; 
       stroke-width: 6px; 
      } 
     </style> 
     <clipPath id="clip"> 
      <use xlink:href="#cls-1-path"/> 
     </clipPath> 
    </defs> 
    <path d="M319.604,36.098 C319.409,...5.551 103.736,5.687 103.192,5.881 Z" class="cls-1" id="cls-1-path" clip-path="url(#clip)"/> 
</svg>

你有什么我应该做什么的想法？

谢谢:)

来源

2016-05-14 krawitz

嗯，这并不是说什么都没有。您只需在#ffffff的背景上选择一个fill: transparent;，并使用#fff白色笔画。

白对白出现隐形:-)

也许Firefox没有解释#fff不同于其他浏览器 - 为#FFFFFF，而不是作为#FFF000。

为了完整起见，我附上我的（最低限度修饰的）测试案例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="320" height="86" viewBox="0 0 320 86"> 
    <defs> 
     <style type="text/css"> 
      .cls-1 { 
       fill: transparent; 
       fill-rule: evenodd; 
       stroke: #fff444; 
       stroke-width: 6px; 
      } 
     </style> 
     <path id="cls-1-path" d = "M 0 0 L 550 230 L 160 0"/> 
     <clipPath id="clip"> 
      <use xlink:href="#cls-1-path"/> 
     </clipPath> 
    </defs> 
    <path d="M319.604,36.098 C319.409, 5.551 103.736,5.687 103.192,5.881 Z" class="cls-1" id="cls-1-path" clip-path="url(#clip)"/> 
</svg>

来源

2016-05-14 17:11:10 zx485

但我的背景不是白色：/ – krawitz

@krawitz：你从上面试过我的测试案例？我所做的只是改变笔画颜色，并添加路径''，以便它不是空的。 – zx485

SVG未出现在Firefox中

回答

相关问题