计算有角度重复行的SVG梯度坐标

Question

我试图在SVG中生成一个平行四边形，其中重复的线条与多边形的左侧和右侧的角度相同。像这样：

我得到了重复的渐变效果，但我无法确定线条的角度。它们偏离了边界平行四边形的角度：

我知道我可以根据渐变的（x1，y1）/（x2，y2）属性操纵角度，但只是玩这些数字并不是为我做的。在给定已知角度的情况下，如何计算用于这些属性的值？

这是我现在拥有的SVG代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1680 550" preserveAspectRatio="xMidYMin">
    <defs>
        <linearGradient id="StripedGradient" spreadMethod="repeat" x1="0%" x2="1%" y1="0%" y2="1%">
            <stop stop-color="yellow" offset="0%" />
            <stop stop-color="yellow" offset="15%" />
            <stop stop-color="transparent" offset="15%" />
            <stop stop-color="transparent" offset="100%" />
        </linearGradient>
    </defs>
    <polygon fill="url(#StripedGradient)" points="0 550, 415 145, 610 145, 195 550" />
</svg>

这个角度目前不到45度（44.301 ......），但价值可能由设计师自行决定改变，所以...

（我对SVG很新，因为我知道它已存在，但直到今天我才用手写内联SVG。）

Answer 1

一种相当简单的方法是将渐变定义为水平条纹。然后，如果您还使用gradientUnits="userSpaceOnUse"，则可以使用gradientTransform来设置角度。

＆＃13;

＆＃13;

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 750 550" preserveAspectRatio="xMidYMin">
    <defs>
        <linearGradient id="StripedGradient" spreadMethod="repeat"
                        gradientUnits="userSpaceOnUse"
                        x1="0" y1="0" x2="0" y2="20"
                        gradientTransform="rotate(-44.301)">
            <stop stop-color="red" offset="0%" />
            <stop stop-color="red" offset="15%" />
            <stop stop-color="transparent" offset="15%" />
            <stop stop-color="transparent" offset="100%" />
        </linearGradient>
    </defs>
    <polygon fill="url(#StripedGradient)" points="0 550, 415 145, 610 145, 195 550" />
</svg>

＆＃13;

＆＃13;

＆＃13;