2020年1月3日 14:05:06go评论69阅读模式

英文:

Reset svg pattern origin point

问题

我正在尝试将一个三角形图案添加到SVG的rect两端。其中rect的宽度可以不同。问题是，根据rect的起始和结束位置不同，图案可能会在三角形的中间开始。我需要它始终从起始位置开始。

我已经尝试设置patternUnits，并调整了主SVG和图案的viewBox，但没有成功。

此示例显示第2个和第3个条纹的图案对齐错误：

<svg width="346" height="100">
    <defs>
        <pattern x="0" y="0" id="zigZag" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
            <polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
        </pattern>
        <pattern x="0" y="0" id="zagZig" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse" patternTransform="rotate(180)">
            <polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
        </pattern>
    </defs>
    <rect width="346" height="100" rx="10" style="fill: rgba(255, 101, 35, 0.75);"></rect>
    <rect x="14" width="16" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <rect x="12" width="2" height="100" fill="url(#zagZig)"></rect>
    <rect x="30" width="2" height="100" fill="url(#zigZag)"></rect>
    <rect x="51" width="50" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <rect x="49" width="2" height="100" fill="url(#zagZig)"></rect>
    <rect x="101" width="2" height="100" fill="url(#zigZag)"></rect>
    <rect x="121" width="80" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <rect x="119" width="2" height="100" fill="url(#zagZig)"></rect>
    <rect x="201" width="2" height="100" fill="url(#zigZag)"></rect>
</svg>

这个示例显示将x位置更改为偶数可以正确对齐图案：

<svg width="346" height="100">
    <defs>
        <pattern x="0" y="0" id="zigZag" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
            <polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
        </pattern>
        <pattern x="0" y="0" id="zagZig" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse" patternTransform="rotate(180)">
            <polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
        </pattern>
    </defs>
    <rect width="346" height="100" rx="10" style="fill: rgba(255, 101, 35, 0.75);"></rect> 
    <rect x="14" width="16" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <rect x="12" width="2" height="100" fill="url(#zagZig)"></rect>
    <rect x="30" width="2" height="100" fill="url(#zigZag)"></rect>
    <rect x="50" width="50" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <rect x="48" width="2" height="100" fill="url(#zagZig)"></rect>
    <rect x="100" width="2" height="100" fill="url(#zigZag)"></rect>
    <rect x="120" width="80" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <rect x="118" width="2" height="100" fill="url(#zagZig)"></rect>
    <rect x="200" width="2" height="100" fill="url(#zigZag)"></rect>
</svg>

如何在不更改由数据驱动的x位置的情况下获得这种对齐？

英文:

I'm trying to add a triangle pattern to each end of a svg rect. Where the rect can be varying widths. The problem is that depending on where the rect starts and ends, the pattern can start in the middle of the triangle. I need it to always start at the beginning.
I've tried setting the patternUnits, messing with the viewBox for both the main svg and the pattern.

This example shows that the 2nd and 3rd stripe have wrongly aligned patterns

&lt;svg width=&quot;346&quot; height=&quot;100&quot;&gt;
&lt;defs&gt;
&lt;pattern x=&quot;0&quot; y=&quot;0&quot; id=&quot;zigZag&quot; width=&quot;2&quot; height=&quot;6&quot; viewBox=&quot;0 0 2 6&quot; patternUnits=&quot;userSpaceOnUse&quot;&gt;
&lt;polygon points=&quot;0 0 2 3 0 6&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
&lt;/pattern&gt;
&lt;pattern x=&quot;0&quot; y=&quot;0&quot; id=&quot;zagZig&quot; width=&quot;2&quot; height=&quot;6&quot; viewBox=&quot;0 0 2 6&quot; patternUnits=&quot;userSpaceOnUse&quot; patternTransform=&quot;rotate(180)&quot;&gt;
&lt;polygon points=&quot;0 0 2 3 0 6&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
&lt;/pattern&gt;
&lt;/defs&gt;
&lt;rect width=&quot;346&quot; height=&quot;100&quot; rx=&quot;10&quot; style=&quot;fill: rgba(255, 101, 35, 0.75);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;14&quot; width=&quot;16&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;12&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zagZig)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;30&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zigZag)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;51&quot; width=&quot;50&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;49&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zagZig)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;101&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zigZag)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;121&quot; width=&quot;80&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;119&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zagZig)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;201&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zigZag)&quot;&gt;&lt;/rect&gt;
&lt;/svg&gt;

This example shows that changing the the x position to an even number aligns the pattern correctly.

    &lt;svg width=&quot;346&quot; height=&quot;100&quot;&gt;
&lt;defs&gt;
&lt;pattern x=&quot;0&quot; y=&quot;0&quot; id=&quot;zigZag&quot; width=&quot;2&quot; height=&quot;6&quot; viewBox=&quot;0 0 2 6&quot; patternUnits=&quot;userSpaceOnUse&quot;&gt;
&lt;polygon points=&quot;0 0 2 3 0 6&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
&lt;/pattern&gt;
&lt;pattern x=&quot;0&quot; y=&quot;0&quot; id=&quot;zagZig&quot; width=&quot;2&quot; height=&quot;6&quot; viewBox=&quot;0 0 2 6&quot; patternUnits=&quot;userSpaceOnUse&quot; patternTransform=&quot;rotate(180)&quot;&gt;
&lt;polygon points=&quot;0 0 2 3 0 6&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
&lt;/pattern&gt;
&lt;/defs&gt;
&lt;rect width=&quot;346&quot; height=&quot;100&quot; rx=&quot;10&quot; style=&quot;fill: rgba(255, 101, 35, 0.75);&quot;&gt;&lt;/rect&gt; 
&lt;rect x=&quot;14&quot; width=&quot;16&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;12&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zagZig)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;30&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zigZag)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;50&quot; width=&quot;50&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;48&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zagZig)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;100&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zigZag)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;120&quot; width=&quot;80&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;118&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zagZig)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;200&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zigZag)&quot;&gt;&lt;/rect&gt;
&lt;/svg&gt;

How can I get this alignment without having to changes the x position which is driven by data?

答案1

得分: 0

I don't think there is an easy way to make patterns work how you want here. Not automatically anyway.

One solution would be to create alternate versions of your patterns for the odd coordinate case. See zigZagOdd and zagZigOdd in the following example.

<svg width="100%" viewBox="0 0 346 100">
    <defs>
        <pattern x="0" y="0" id="zigZag" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
            <polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
        </pattern>
        <pattern x="1" y="0" id="zigZagOdd" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
            <polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
        </pattern>
        <pattern x="0" y="0" id="zagZig" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse" patternTransform="rotate(180)">
            <polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
        </pattern>
        <pattern x="1" y="0" id="zagZigOdd" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse" patternTransform="rotate(180)">
            <polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
        </pattern>
    </defs>
    <rect width="346" height="100" rx="10" style="fill: rgba(255, 101, 35, 0.75);"></rect>
    <rect x="14" width="16" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <rect x="12" width="2" height="100" fill="url(#zagZig)"></rect>
    <rect x="30" width="2" height="100" fill="url(#zigZag)"></rect>
    <rect x="51" width="50" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <rect x="49" width="2" height="100" fill="url(#zagZigOdd)"></rect>
    <rect x="101" width="2" height="100" fill="url(#zigZagOdd)"></rect>
    <rect x="121" width="80" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <rect x="119" width="2" height="100" fill="url(#zagZigOdd)"></rect>
    <rect x="201" width="2" height="100" fill="url(#zigZagOdd)"></rect>
</svg>

However, if your goal was simply to reduce SVG file size and make it easy to apply your patterned fringes, then you could use a different method instead. I'd recommend the <use> element.

<svg width="100%" viewBox="0 0 346 100">
    <defs>
        <pattern x="0" y="0" id="fringe" width="2" height="6" viewBox="0 0 2 6" patternUnits="userSpaceOnUse">
            <polygon points="0 0 2 3 0 6" style="fill: rgb(0, 0, 0);"></polygon>
        </pattern>
        <rect id="zigZag" width="2" height="100" fill="url(#fringe)"/>
        <rect id="zagZig" width="2" height="100" fill="url(#fringe)" transform="scale(-1,1)"/>
    </defs>
    <rect width="346" height="100" rx="10" style="fill: rgba(255, 101, 35, 0.75);"></rect>
    <rect x="14" width="16" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <use x="14" xlink:href="#zagZig"/>
    <use x="30" xlink:href="#zigZag"/>
    <rect x="51" width="50" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <use x="51" xlink:href="#zagZig"/>
    <use x="101" xlink:href="#zigZag"/>
    <rect x="121" width="80" height="100" style="fill: rgb(255, 101, 35);"></rect>
    <use x="121" xlink:href="#zagZig"/>
    <use x="201" xlink:href="#zigZag"/>
</svg>

英文:

I don't think there is an easy way to make patterns work how you want here. Not automatically anyway.

One solution would be to create alternate versions of your patterns for the odd coordinate case. See zigZagOdd and zagZigOdd in the following example.

&lt;svg width=&quot;100%&quot; viewBox=&quot;0 0 346 100&quot;&gt;
&lt;defs&gt;
&lt;pattern x=&quot;0&quot; y=&quot;0&quot; id=&quot;zigZag&quot; width=&quot;2&quot; height=&quot;6&quot; viewBox=&quot;0 0 2 6&quot; patternUnits=&quot;userSpaceOnUse&quot;&gt;
&lt;polygon points=&quot;0 0 2 3 0 6&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
&lt;/pattern&gt;
&lt;pattern x=&quot;1&quot; y=&quot;0&quot; id=&quot;zigZagOdd&quot; width=&quot;2&quot; height=&quot;6&quot; viewBox=&quot;0 0 2 6&quot; patternUnits=&quot;userSpaceOnUse&quot;&gt;
&lt;polygon points=&quot;0 0 2 3 0 6&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
&lt;/pattern&gt;
&lt;pattern x=&quot;0&quot; y=&quot;0&quot; id=&quot;zagZig&quot; width=&quot;2&quot; height=&quot;6&quot; viewBox=&quot;0 0 2 6&quot; patternUnits=&quot;userSpaceOnUse&quot; patternTransform=&quot;rotate(180)&quot;&gt;
&lt;polygon points=&quot;0 0 2 3 0 6&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
&lt;/pattern&gt;
&lt;pattern x=&quot;1&quot; y=&quot;0&quot; id=&quot;zagZigOdd&quot; width=&quot;2&quot; height=&quot;6&quot; viewBox=&quot;0 0 2 6&quot; patternUnits=&quot;userSpaceOnUse&quot; patternTransform=&quot;rotate(180)&quot;&gt;
&lt;polygon points=&quot;0 0 2 3 0 6&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
&lt;/pattern&gt;
&lt;/defs&gt;
&lt;rect width=&quot;346&quot; height=&quot;100&quot; rx=&quot;10&quot; style=&quot;fill: rgba(255, 101, 35, 0.75);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;14&quot; width=&quot;16&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;12&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zagZig)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;30&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zigZag)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;51&quot; width=&quot;50&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;49&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zagZigOdd)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;101&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zigZagOdd)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;121&quot; width=&quot;80&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;119&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zagZigOdd)&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;201&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#zigZagOdd)&quot;&gt;&lt;/rect&gt;
&lt;/svg&gt;

However, if your goal was simply to reduce SVG file size and make it easy to apply your patterned fringes, then you could use a different method instead. I'd recommend the <use> element.

&lt;svg width=&quot;100%&quot; viewBox=&quot;0 0 346 100&quot;&gt;
&lt;defs&gt;
&lt;pattern x=&quot;0&quot; y=&quot;0&quot; id=&quot;fringe&quot; width=&quot;2&quot; height=&quot;6&quot; viewBox=&quot;0 0 2 6&quot; patternUnits=&quot;userSpaceOnUse&quot;&gt;
&lt;polygon points=&quot;0 0 2 3 0 6&quot; style=&quot;fill: rgb(0, 0, 0);&quot;&gt;&lt;/polygon&gt;
&lt;/pattern&gt;
&lt;rect id=&quot;zigZag&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#fringe)&quot;/&gt;
&lt;rect id=&quot;zagZig&quot; width=&quot;2&quot; height=&quot;100&quot; fill=&quot;url(#fringe)&quot; transform=&quot;scale(-1,1)&quot;/&gt;
&lt;/defs&gt;
&lt;rect width=&quot;346&quot; height=&quot;100&quot; rx=&quot;10&quot; style=&quot;fill: rgba(255, 101, 35, 0.75);&quot;&gt;&lt;/rect&gt;
&lt;rect x=&quot;14&quot; width=&quot;16&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;use x=&quot;14&quot; xlink:href=&quot;#zagZig&quot;/&gt;
&lt;use x=&quot;30&quot; xlink:href=&quot;#zigZag&quot;/&gt;
&lt;rect x=&quot;51&quot; width=&quot;50&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;use x=&quot;51&quot; xlink:href=&quot;#zagZig&quot;/&gt;
&lt;use x=&quot;101&quot; xlink:href=&quot;#zigZag&quot;/&gt;
&lt;rect x=&quot;121&quot; width=&quot;80&quot; height=&quot;100&quot; style=&quot;fill: rgb(255, 101, 35);&quot;&gt;&lt;/rect&gt;
&lt;use x=&quot;121&quot; xlink:href=&quot;#zagZig&quot;/&gt;
&lt;use x=&quot;201&quot; xlink:href=&quot;#zigZag&quot;/&gt;
&lt;/svg&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

重置 SVG 图案的起始点

问题

答案1

Text in a SVG: 在原地将文本围绕圆旋转

如何将SVG大小精确调整以包裹其内容？

绘制包含多个路径的SVG，一个路径一次，使用JavaScript进行动画。

Firefox没有正确设置SVG的父div的宽度。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论