Chrome是否打破了svg stroke ='url（＃...）'？

Question

在12月初，我使用HTML表创建了一个在Chrome中开发的网页，其中包含使用SVG创建的花哨边框。由于表格单元格大小未知，我必须使用相对（％）坐标来到达底部和右边框。因此我必须使用线元素。我可以使用stroke ='url（＃...）'方法用模式填充这些行，其中...是本地defs部分中的模式元素。这已不再适用于Chrome，但适用于Safari和Firefox。非常相似的fill ='url（＃...）'在Chrome中正常运行，但我无法将其用于相对锚点坐标。

有人碰到这个吗？

这是一个测试用例：

<svg patternUnits='userSpaceOnUse' xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'>

<defs>
    <pattern id='utrim' height='10' width='10' patternUnits='userSpaceOnUse' >
                <rect height='10' width='5' fill='green' />
    </pattern>

    <pattern id='utrim2' height='10' width='10' patternUnits='userSpaceOnUse' >
                <rect height='10' width='5' fill='red' />
    </pattern>

</defs>

<g > 
    <line x1='0' y1='0' x2='100%' y2='0' stroke-width='20' stroke='url(#utrim)' />
    <rect x='0' y='0' width='100%' height='5' fill='url(#utrim2)' />
</g> 

</svg>

Answer 1

也许有点晚，但纯水平线不能使用网址。 您可以使用小偏移量来克服这个问题：

<line x1='0' y1='0' x2='100%' y2='0.01' stroke-width='20' stroke='url(#utrim)' />

Answer 2

好吧，我已经向Chromium汇报了这个。

我想出了如何使用填充矩形来解决这个问题。我可以将矩形定位在视口的下边缘和右边缘之外，使用transform ='translate（...）'将它们拉回来，然后用图案填充它们。模式与它所填充的空间的尺寸一致，我没有意识到，这使得一切都按照我需要的方式工作。

Answer 3

至于镀铬72'''表示uri的结束。 https://www.chromestatus.com/feature/5656049583390720