Svg在Safari和Firerox中不起作用

我用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>

image/svg+xml

以下是我复制的文件的代码，在所有浏览器中都运行良好：

<?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>

image/svg+xml

---

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

您使用的过滤器包含原语

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

混合模式

color burn

作为Inkscape的一部分已经有一段时间了，但它没有在规范中定义。对于SVG2规范，过滤器效果已移至。混合模式是在那里定义的，但尚未由所有浏览器实现

但这是第二个问题。主要问题是试图使用背景图像作为混合源。我还不知道这在哪里起作用。目前，过滤器仅支持使用源图形、其透明度、填充或笔划作为输入

如果要使用源图形以外的任何内容作为合成的输入，则必须通过所述的

过滤器原语将其导入

---

您可能在Inkscape中引入该过滤器的操作是打开图层->图层…编辑器并选择混合模式：“Coror burn”。选择“正常”删除过滤器。Inkscape之外没有其他选择可用。

您正在使用包含原语的筛选器

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

混合模式

color burn

作为Inkscape的一部分已经有一段时间了，但它没有在规范中定义。对于SVG2规范，过滤器效果已移至。混合模式是在那里定义的，但尚未由所有浏览器实现

但这是第二个问题。主要问题是试图使用背景图像作为混合源。我还不知道这在哪里起作用。目前，过滤器仅支持使用源图形、其透明度、填充或笔划作为输入

如果要使用源图形以外的任何内容作为合成的输入，则必须通过所述的

过滤器原语将其导入

---

您可能在Inkscape中引入该过滤器的操作是打开图层->图层…编辑器并选择混合模式：“Coror burn”。选择“正常”删除过滤器。Inkscape之外没有其他选项可用。

我不明白你在说什么。我只是在Inkscape中写了一个“p”，与svg一样安全，在Safari中不起作用。我改天也会这样做，然后它就会起作用。我也不知道我做了什么不同。编辑来描述Inkscape图层混合的问题。我只是不明白你在说什么。我只是在Inkscape中写了一个“p”，与svg一样安全，在Safari中不起作用。我改天也会这样做，然后它就会起作用。我也不知道我做了什么不同。编辑来描述Inkscape图层混合的问题。