过滤元素未在浏览器中呈现

Question

我正在尝试使用以下方法创建自己的星空图集 wikimedia constellation images in SVG. If you display them in a browser, the background - except for the area of the constellation itself - appears a solid medium grey. To test how it can be displayed in a Java application, I have taken class SVGApplication 来自 Batik 文档。它有效 - 几乎：灰色背景现在减少为一些矩形，它们之间有宽阔的白色间隙。

据我所知，这是过滤器定义和使用：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="485.028pt" height="456.053pt"
     viewBox="0 0 485.028 456.053" version="1.1">
<!-- ... -->
<filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
  <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
</filter>
<mask id="mask0">
  <g filter="url(#alpha)">
    <rect x="0" y="0" width="486" height="457" style="fill:rgb(100%,100%,100%);fill-opacity:0.149994;stroke:none;"/>
  </g>
</mask>
<clipPath id="clip4">
  <rect width="421" height="385"/>
</clipPath>
<!-- ... -->
</svg>

Java 代码非常简单，使用 JFileChooser 来 select 一个文件并将其提供给 JSVGCanvas。基本行是：

    JFrame f = new JFrame("Batik");
    final JPanel panel = new JPanel(new BorderLayout());
    JSVGCanvas svgCanvas = new JSVGCanvas();
    panel.add("Center", svgCanvas);
    File file = new File( "aaa.svg" );
    svgCanvas.setURI(file.toURI().toURL().toString());
    f.getContentPane().add( panel );
    f.setSize(600, 600);
    f.setVisible(true);

需要做什么才能让背景在浏览器中显示出来？

编辑这是具有相同效果的 SVG 的简化版本 - 在浏览器中有效，但在 Java 程序中无效。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      width="485.028pt" height="456.053pt"
      viewBox="0 0 485.028 456.053" version="1.1">
    <defs>
    <filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
    </filter>
    <mask id="mask0">
      <g filter="url(#alpha)">
    <rect x="0" y="0" width="486" height="457" style="fill:rgb(100%,100%,100%);fill-opacity:0.149994;stroke:none;"/>
      </g>
    </mask>

    <g id="surface2">
    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(13.730068%,12.159915%,12.54902%);fill-opacity:1;" d="M 376.316406 213.578125 L 351.210938 219.398438 L 333.015625 222.675781 L 336.652344 243.417969 L 309.726562 248.511719 L 310.457031 254.695312 L 296.265625 256.878906 L 282.4375 258.335938 L 285.347656 287.808594 L 278.070312 289.265625 L 282.4375 339.847656 L 272.976562 340.9375 L 274.070312 350.035156 L 244.597656 351.855469 L 207.480469 353.308594 L 183.828125 352.21875 L 184.554688 329.292969 L 201.660156 248.511719 L 176.914062 247.417969 L 154.355469 245.964844 L 125.246094 242.6875 L 127.429688 226.3125 L 109.964844 223.402344 L 86.675781 219.035156 L 65.570312 214.304688 L 69.210938 199.75 L 48.46875 195.015625 L 16.449219 184.464844 L 52.835938 71.296875 L 71.390625 76.753906 L 91.40625 82.210938 L 84.855469 111.324219 L 117.242188 117.511719 L 122.335938 92.402344 L 169.273438 98.222656 L 167.089844 114.960938 L 188.558594 116.054688 L 238.046875 133.886719 L 253.328125 114.960938 L 277.707031 112.050781 L 303.90625 108.050781 L 317.003906 66.203125 L 336.652344 61.105469 L 353.027344 55.648438 L 399.605469 206.664062 L 376.316406 213.578125 Z M 0.800781 384.96875 L 420.34375 384.96875 L 420.34375 0.335938 L 0.800781 0.335938 L 0.800781 384.96875 Z M 0.800781 384.96875 "/>
    </g>

    </defs>
    <g id="surface0">
    <use xlink:href="#surface2"  transform="matrix(1,0,0,1,33,18)" mask="url(#mask0)"/>
    </g>
</svg>

（我承认我对SVG没有经验，我愿意RTFM，但是我从哪里开始呢？）

Answer 1

假设您猜对了导致 Batik 出现问题的遮罩和滤镜组合，请尝试此解决方法。

我们将用近似等价的东西快速而粗暴地替换有问题的元素。

从文件末尾算起大约九行，您会发现以下内容：

<use xlink:href="#surface2" transform="matrix(1,0,0,1,33,18)" mask="url(#mask0)"/>

尝试将其更改为

<use xlink:href="#surface2" transform="matrix(1,0,0,1,33,18)" opacity="0.15"/>

修改后的文件似乎与原始文件呈现相同，并且在 Batik 中工作正常 - 至少对我而言。

希望您的其他 SVG 文件具有相同的文件排列，并且同样容易修复。

祝你好运！

过滤元素未在浏览器中呈现

filter element not rendered as in browser

svg

batik

svg-filters