Chrome 是否破坏了 svg stroke='url(#...)'？

Question

12 月初，我发布了一个在 Chrome 中使用 HTML 表格开发的网页，该表格带有用 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

可能有点晚了，但纯水平线无法使用 url。
您可以使用一个小的偏移量来克服这个问题：

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

Answer 2

我已经向 Chromium 报告了这一点。

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

Answer 3

从 chrome 72 开始，'#' 表示 uri 的结束。 https://www.chromestatus.com/feature/5656049583390720