1

In early December I put up a web page developed in Chrome using HTML tables with fancy borders created with SVG. Because the table cell size is unknown, I must use relative (%) coordinates to get to the bottom and right borders. Therefore I must use line elements. I can fill those lines with a pattern using the stroke='url(#...)' method, where the ... is a pattern element in the local defs section. This is no longer working in Chrome, but is in Safari and Firefox. The very similar fill='url(#...)' is working in Chrome, but I cannot use it with relative anchor coordinates.

Anybody run into this?

Here is a test case:

<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>
4

3 回答 3

2

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

<line x1='0' y1='0' x2='100%' y2='0.01' stroke-width='20' stroke='url(#utrim)' />
于 2014-03-28T14:33:56.773 回答
1

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

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

于 2013-02-12T19:07:47.660 回答
0

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

于 2019-04-05T14:44:41.917 回答