如何根据角度指定svg线性渐变

我想以正确复制CSS线性渐变行为的方式指定SVG线性渐变。例如，在CSS渐变中，您可以分别指定渐变的开始和结束位于框的左上角和右下角。当框调整大小时，背景渐变会自动适应新的大小。如何根据角度指定svg线性渐变

以我的第一次尝试，我复制一个CSS线性梯度用SVG，通过指定的角度，并且通过计算X1，Y1，X2，Y2从箱尺寸坐标。但是，如果框被调整大小，渐变的角度不会改变，并且不再正确。（我将不得不重新计算所有的坐标）。

我的下一个尝试是使用变换来旋转渐变。下面是一些代码：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
    <linearGradient id="g1" gradientUnits="userSpaceOnUse" 
     gradientTransform="rotate(-45 150 50)"> 
    <stop stop-color="#FF0000" offset="0"/> 
    <stop stop-color="#00FF00" offset="0.5"/> 
    <stop stop-color="#0000FF" offset="1"/> 
    </linearGradient> 
    <rect x="0" y="0" width="100%" height="100%" fill="url(#g1)" /> 
</svg>

现在，这个工程的规模（300,100）的盒子，但你会看到，我不得不为旋转中心（150,50）指定绝对值。

我可以用百分比来指定中心吗？最后，我希望渐变的角度适应盒子的尺寸。

来源

2012-02-24 Jules

是gradientUnits = “objectBoundingBox” gradientTransform = “旋转（-45 0.5 0.5）” 你所要寻找的？ – 2012-02-24 17:49:17

我想我已经尝试过，因为我开始使用objectBoundingBox，但我会再试一次... – Jules 2012-02-24 18:03:53

我只是试了一遍，它不起作用。看起来要做的是计算方框上的旋转渐变，因此-45从一个角落到另一个角落。然后它似乎拉伸宽度，保持渐变。如果盒子是100x100，那么角度是正确的，但在我的例子中，角度结果是错误的。 – Jules 2012-02-24 18:09:34

SVG只允许梯度变换旋转起源是specified in terms of absolute coordinates。您需要使用JavaScript动态设置旋转原点，以便完成我认为您期望的操作：旋转渐变，还可以使颜色停止均匀分布在包含框中。

来源

2012-02-24 19:29:17

感谢您的回复。我想要做的就是模仿CSS线性渐变。网上的所有示例都使用根据边或角原点指定的渐变。这很容易在svg中模仿，并且如果该框被调整大小，效果不会改变。通过计算x1，y1，x2，y2坐标或围绕中心旋转，也可以模拟根据角度指定的CSS渐变。调整框的大小时会出现问题。为了清楚起见，你是否说当调整框的大小时，必须重新计算坐标以保持与CSS渐变的对等性？ – Jules 2012-02-24 21:09:10

是的，这就是我所说的。 – 2012-02-24 23:38:56

如何根据角度指定svg线性渐变

回答

相关问题