Question

在我的OS X硬盘驱动器上的浏览器中呈现自定义SVG文件的代码时，我无法查看SVG过滤器效果。我已经确定我可以显示我硬盘上的SVG滤镜效果，而不是这个自定义SVG文件。我也尝试过其他StackOverflow帖子中的一些内容来尝试解决这个问题，但结果很有趣但最终都不成功。

我正在寻求帮助以获得W3.org示例效果来处理我的测试图像。

确定我可以显示SVG效果

为了向自己保证我可以显示我硬盘上的.svg文件的SVG效果，我使用了http://www.w3.org/TR/SVG/images/filters/filters01.svg上的W3.org示例

使用代码保持不变实际上有效。步骤：

另存为本地硬盘文件文件：///用户/ [用户名] /Pictures/svg/w3orgfiltertest.svg
打开文件在Firefox或Safari中

实际和预期结果：发生过滤效果。

到目前为止一切顺利。

尝试将这些效果应用于现有的复杂文件

我正在处理的版本有17635行。

我在第189行和第190行之间插入</g>，就在</g>和<g id="車站">标记之前（“车站”的意思是“站点”）。

我在<g filter="url(#MyFilter)" >标记之后和下一个<rect>标记之前的第15行和第16行之间插入<g>。

以上两项更改将铁路线的所有线条图都包含在过滤器属性中。

最后，<svg>和<rect>代码之间的第5行和第6行之间的代码如下：

<defs>
        <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                          specularExponent="20" lighting-color="#bbbbbb"  
                          result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000"/>
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="litPaint"/>
      </feMerge> 
    </filter>
  </defs>

接下来，我在Safari中从硬盘中打开文件。

实际结果：铁路线不再显示。

预期结果：铁路线显示效果。

接下来，我按照How to apply SVG filter to an element?的建议添加命名空间过滤器。这改变了

<g filter="url(#MyFilter)" >

现在第34行到

<g filter="filter:url(#MyFilter)" >

实际结果：在没有SVG效果的情况下恢复铁路线。

预期结果：使用SVG效果恢复铁路线。

奇怪的是，如果我将过滤器命名空间添加到我的W3.org示例代码的硬盘版本中，他们的示例过滤器会停止工作。

接下来，我在SVG not working when access on localhost. Why?尝试了提示。我使用的是.svg扩展名，而不是.html，但是如果我将扩展名更改为.xhtml，它会提供与.svg扩展名相同的结果，无论是W3.org示例还是复杂文件。

最后，我尝试了SVG filter fails to render in Firefox and prevents fill attribute from being applied处的提示并替换了

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="6452px"
 height="9134.5px" viewBox="0 0 6452 9134.5" enable-background="new 0 0 6452 9134.5" xml:space="preserve">

与

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="w3.org/2001/xml-events" x="0px" y="0px" width="6452px"
 height="9134.5px" viewBox="0 0 6452 9134.5" enable-background="new 0 0 6452 9134.5" xml:space="preserve">

没有明显效果。

知道如何允许我将过滤效果添加到复杂文件中吗？

Answer 1

您复制的过滤器显示：

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">

这意味着它适用于左上角的宽度为200且高度为120的矩形。在你复制的SVG中，这几乎是左上角和盒装文本“TRA Trunk Line”之间的所有内容。 - 只有空地。

尝试将滤镜应用于整个图像区域。 viewBox属性显示为viewBox="0 0 6452 9134.5"，因此请在过滤器中使用这些值：

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="6452" height="9134.5">

从硬盘驱动器查看时，SVG过滤器无法渲染

1 个答案: