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

时间:2016-08-28 16:34:55

标签: svg svg-filters batik

我试图用自己创建自己的天空地图集 SVG中的wikimedia constellation images。如果您在浏览器中显示它们,背景 - 除了星座本身的区域 - 显示为坚实的中灰色。为了测试如何在Java应用程序中显示它,我从Batik文档中获取了class SVGApplication。它的工作原理 - 几乎:灰色背景现在缩小为一些矩形,它们之间有很宽的白色间隙。

Result of SVGApplication

就我可以解密SVG而言,这是过滤器的定义和使用:

<html>
<head>
</head>
<body>
    <script>
        abc();
        function abc() {
            
            alert("not working 1st time");
            
        }
    </script>
</body>
</html>

Java代码非常简单,使用JFileChooser选择文件并使用它提供JSVGCanvas。基本路线是:

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

要在浏览器中显示背景,需要做些什么?

修改 这是具有相同效果的SVG的简化版本 - 在浏览器中工作但在Java程序中不起作用。

&#13;
&#13;
    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);
&#13;
&#13;
&#13;

(我承认我没有使用SVG的经验。我愿意接受RTFM,但我从哪里开始?)

1 个答案:

答案 0 :(得分: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文件具有相同的文件排列,并且易于修复。

祝你好运!