Batik/Eclipse 中的 SVG 渲染错误

Question

我已经在 Eclipse 中使用 Batik 一年了，遇到了一个我似乎无法摆脱的渲染错误。我已将其缩减为最小集合并将图像放在 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 所做的是：

1. 在底部画一条红色条纹。
2. 然后在其上画一条黄色条纹
3. 最后绘制一个红色方块覆盖两条条纹的交叉点，使其看起来像红色方块在上面。

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

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