Question

我一直在使用Batik和Eclipse一年，并遇到了渲染错误，我似乎无法动摇。我已将其缩小到最小集并将图像放在flickr上：https://www.flickr.com/photos/dattatreya/15019722962/。我希望看到一条坚实的宽红线穿过一条纯黄色的宽线。您可以在穿过红色条带的细黄线（沿着黄色条带的顶部边缘）中看到伪像（错误）。在我画的许多图像中都看到了类似的错误。

Batik生成的SVG代码如下。有趣的是，前一段时间，Safari和Chrome（但不是IE）都错误地呈现了该代码，但是现在，所有浏览器似乎都能正常工作。只有蜡染不会。

这可能是一个蜡染虫;如果是的话，我希望他们能尽快修复它！

Batik为图像生成的SVG代码：

=============================================== =========

<svg stroke-dasharray="none" shape-rendering="auto"
     xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;"
     text-rendering="auto" fill-opacity="1" contentScriptType="text/ecmascript"
     color-interpolation="auto" color-rendering="auto"
     preserveAspectRatio="xMidYMid meet" font-size="12" fill="black"
     xmlns:xlink="http://www.w3.org/1999/xlink" stroke="black"
     image-rendering="auto" stroke-miterlimit="10" zoomAndPan="magnify"
     version="1.0" stroke-linecap="square" stroke-linejoin="miter"
     contentStyleType="text/css" font-style="normal" stroke-width="1"
     stroke-dashoffset="0" font-weight="normal" stroke-opacity="1">
    <!--Generated by the Batik Graphics2D SVG Generator-->
    <defs id="genericDefs"/>
    <g>
        <g fill="red" stroke="red">
            <path d="M-106.066 106.066 L893.934 1106.066 L1000 1212.1321 L1212.1321 1000 L1106.066 893.934 L106.066 -106.066 L0 -212.132 L-212.132 0 L-106.066 106.066 Z"
                  stroke="none"/>
        </g>
    </g>
    <!--Generated by the Batik Graphics2D SVG Generator-->
    <defs id="genericDefs"/>
    <g>
        <g fill="yellow" stroke="yellow">
            <path d="M106.066 1106.066 L1106.066 106.066 L1212.1321 0 L1000 -212.132 L893.934 -106.066 L-106.066 893.934 L-212.132 1000 L0 1212.1321 L106.066 1106.066 Z"
                  stroke="none"/>
        </g>
    </g>
    <!--Generated by the Batik Graphics2D SVG Generator-->
    <defs id="genericDefs"/>
    <g>
        <defs id="defs1">
            <clipPath clipPathUnits="userSpaceOnUse" id="clipPath1">
                <path d="M500 287.868 L287.868 500 L287.868 500 L500 712.1321 L500 712.1321 L712.1321 500 L500 287.868 Z"/>
            </clipPath>
        </defs>
        <g fill="red" stroke="red">
            <path d="M-106.066 106.066 L893.934 1106.066 L1000 1212.1321 L1212.1321 1000 L1106.066 893.934 L106.066 -106.066 L0 -212.132 L-212.132 0 L-106.066 106.066 Z"
                  clip-path="url(#clipPath1)" stroke="none"/>
        </g>
    </g>
</svg>

=============================================== ==================

Answer 1

这不是蜡染虫。这是一个“问题”，几乎所有的图形库都将拥有SVG渲染器或其他。当我在Chrome中呈现它时，它仍然可见 - 它不太明显。

你的SVG做的是：

在底部画一条红色条纹。
然后画一条黄色条纹
最后它绘制了一个红色正方形，以覆盖两个条纹的交叉点，使其看起来像红色正方形在顶部。

您看到几乎看不见黄线的原因是抗锯齿。渲染器在黄色条带的边缘绘制部分黄色像素，以使条纹边缘看起来更平滑。当您在顶部绘制红色正方形时，一些黄色像素将保持可见和/或在顶部绘制的部分红色像素让黄色显示通过。结果是边缘处出现黄色条纹。

我想问题是“为什么你不只是在黄色上面画出红色条纹？”这样做可以解决您的问题。

Batik / Eclipse中的SVG渲染错误

1 个答案: