SVG 在 Safari 和 Firefox 中不起作用

Question

我有一个用 Inkscape 创建的 svg。我在原程序 Inkscape 中可以很好地看到 img，在 Chrome 中也可以，但在 Safari 和 Firefox 中我什么都看不到。

我试图找出制作副本的问题并使文档尽可能简单。我最终只将字母“p”转换为路径。

然后我尝试重现错误并使用 Inkscape 创建一个新的 svg 文档并绘制任何内容，例如将“p”转换为路径。它适用于所有浏览器。

如果我用代码编辑器打开了错误的 svg，这就是我看到的：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="180"
   height="180"
   viewBox="0 0 47.625001 47.625001"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
   sodipodi:docname="p.svg"
   enable-background="new"
   inkscape:export-filename="/Users/narcis/Dropbox/feines/business/projectes/want/want-web/want-parts/svg/p.png"
   inkscape:export-xdpi="300"
   inkscape:export-ydpi="300">
  <defs
     id="defs2">
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter853">
      <feBlend
         inkscape:collect="always"
         mode="color-burn"
         in2="BackgroundImage"
         id="feBlend855" />
    </filter>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="90"
     inkscape:cy="90"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     showguides="false"
     inkscape:guide-bbox="true"
     inkscape:window-width="1592"
     inkscape:window-height="915"
     inkscape:window-x="0"
     inkscape:window-y="1"
     inkscape:window-maximized="0"
     units="px" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-249.37498)"
     style="filter:url(#filter853);opacity:1">
    <path
       inkscape:connector-curvature="0"
       id="path818"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:35.27777863px;line-height:125.99999905%;font-family:futura;-inkscape-font-specification:'futura Bold';letter-spacing:0px;word-spacing:0px;fill:#020202;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 27.693056,269.00706 q 0,-0.84667 -0.3175,-1.5875 -0.282222,-0.77611 -0.846667,-1.34056 -0.564444,-0.56444 -1.340556,-0.88194 -0.740833,-0.35277 -1.622777,-0.35277 -0.846667,0 -1.5875,0.31749 -0.740834,0.3175 -1.305278,0.88194 -0.529167,0.56446 -0.881945,1.34056 -0.3175,0.74083 -0.3175,1.5875 0,0.84667 0.3175,1.5875 0.3175,0.74083 0.881945,1.30528 0.564444,0.52916 1.305278,0.88194 0.776111,0.3175 1.622777,0.3175 0.846667,0 1.5875,-0.3175 0.740834,-0.3175 1.270001,-0.88194 0.564444,-0.56445 0.881944,-1.30528 0.352778,-0.74083 0.352778,-1.55222 z M 19.649722,287.034 h -6.385278 v -27.12861 h 6.385278 v 2.01083 q 2.046111,-2.57527 5.573889,-2.57527 1.940278,0 3.598334,0.77612 1.693333,0.74083 2.928055,2.04611 1.234723,1.30527 1.905,3.06916 0.705556,1.76388 0.705556,3.77472 0,2.01083 -0.705556,3.73945 -0.670277,1.72861 -1.905,3.03388 -1.199444,1.30528 -2.8575,2.04611 -1.658055,0.74084 -3.598333,0.74084 -3.386667,0 -5.644445,-2.32834 z" />
  </g>
</svg>

这是我复制并在所有浏览器中运行良好的文件代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="180"
   height="180"
   viewBox="0 0 47.624999 47.625001"
   version="1.1"
   id="svg4510"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
   sodipodi:docname="p-be.svg">
  <defs
     id="defs4504" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="-50.54196"
     inkscape:cy="90"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:window-width="1920"
     inkscape:window-height="1035"
     inkscape:window-x="67"
     inkscape:window-y="36"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata4507">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-249.37498)">
    <g
       aria-label="p"
       style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="text5057">
      <path
         d="m 27.693056,269.00707 q 0,-0.84667 -0.3175,-1.5875 -0.282223,-0.77612 -0.846667,-1.34056 -0.564445,-0.56444 -1.340556,-0.88194 -0.740833,-0.35278 -1.622777,-0.35278 -0.846667,0 -1.587501,0.3175 -0.740833,0.3175 -1.305277,0.88194 -0.529167,0.56445 -0.881945,1.34056 -0.3175,0.74083 -0.3175,1.5875 0,0.84666 0.3175,1.5875 0.3175,0.74083 0.881945,1.30528 0.564444,0.52916 1.305277,0.88194 0.776112,0.3175 1.622778,0.3175 0.846667,0 1.5875,-0.3175 0.740834,-0.3175 1.27,-0.88194 0.564445,-0.56445 0.881945,-1.30528 0.352778,-0.74084 0.352778,-1.55222 z m -8.043334,18.02694 H 13.264444 V 259.9054 h 6.385278 v 2.01083 q 2.046111,-2.57528 5.573889,-2.57528 1.940278,0 3.598334,0.77612 1.693333,0.74083 2.928055,2.04611 1.234722,1.30527 1.905,3.06916 0.705556,1.76389 0.705556,3.77473 0,2.01083 -0.705556,3.73944 -0.670278,1.72861 -1.905,3.03389 -1.199444,1.30528 -2.8575,2.04611 -1.658056,0.74083 -3.598333,0.74083 -3.386667,0 -5.644445,-2.32833 z"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:35.27777863px;font-family:Futura;-inkscape-font-specification:'Futura Bold';stroke-width:0.26458332px"
         id="path814" />
    </g>
  </g>
</svg>

我对 svg 代码一无所知。谁能告诉我出了什么问题以及为什么 svg 在 Safari 和 Firefox 中出现问题？

Answer 1

您正在使用包含原语的过滤器

<feBlend in2="BackgroundImage" mode="color-burn" />

混合模式color-burn 已经成为 Inkscape 的一部分，但在 SVG 1.1 规范中没有定义。对于 SVG 2 规范，滤镜效果已移至 CSS Filter Effects。混合模式已在此处定义，但尚未在所有浏览器中实现。

但这是次要问题。主要问题是尝试使用背景图像作为混合源。我还不知道这在任何地方都有效。目前，过滤器仅支持使用源图形、其透明度、填充或描边作为输入。

如果您想将源图形以外的任何内容用作合成的输入，则必须通过 <feImage> 过滤器原语将其导入，如 here 所述。

您在 Inkscape 中引入该过滤器的方法可能是打开 Layer->Layers... 编辑器并选择混合模式：“Coror burn”。选择“正常”删除过滤器。在 Inkscape 之外没有其他选择。