Question

我一直在textarea元素上使用SVG背景图像，为文本区域中显示的文本提供行号（以下图像中的行号来自SVG背景图像）。

但是，在Windows 7上使用Chrome 60.0.3112.113时，我会看到锯齿状的SVG显示：

正如我通过摆弄发现的那样，当我编辑style元素的svg属性以包含opacity: 0.99时，它会像预期的那样呈现（和之前的Chrome一样）：

重现此内容的HTML代码如下（将opacity更改为0.99以查看差异）：

<!DOCTYPE html>
<html>
<title>SVG background image opacity/aliasing bug</title>
<style>
#ta {
    font-size: 16px;
    width: 100%;
    height: 100%;
    padding-left: 40px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="fill: red; opacity: 1.0"><text x="4" y="20">0001</text><text x="4" y="38">0002</text><text x="4" y="56">0003</text></svg>')
}
</style>
<body>
<textarea id="ta" cols="40" rows="4">Line 1
Line 2
Line 3</textarea>
</body>
</html>

如果我只是将SVG代码放入一个单独的文件中并使用Chrome将其作为普通SVG文件（而不是数据URI中的背景）打开，它会按预期显示。

因此，虽然有opacity: 0.99解决方法，但我想知道为什么Chrome会错误地渲染这个简单的SVG，或者是否有更好的解决方法，或者我正在使用的aproach存在根本性的错误。< / p>

Chrome SVG背景图片别名错误？

0 个答案: