英文:
Transforming Linear Gradients Individually For Each Element
问题
只要我正确理解：
- 如果我想在SVG元素上使用线性渐变，比如
<rect>，我需要首先将<linearGradient>放在<defs>内，然后在fill或style中引用它。 - 如果我想为每个
<rect>单独转换渐变，我无法在没有为每个单独的<rect>定义<linearGradient>的情况下执行此操作，因为gradientTransform属性仅允许在渐变元素上使用。
我感到困惑，因为ChatGPT告诉我我可以在我的<rect>上放置gradientTransform，但MDN说
您可以将此属性与以下SVG元素一起使用：
<linearGradient><radialGradient>
所以我是否需要为每个<rect>使用单独的<linearGradient>？
英文:
Just wanted to double check whether I understand this correctly:
- If I want to use linear gradients on SVG elements, like
<rect>, I need to first put the<linearGradient>inside the<defs>and then reference it either infillor instyle. - If I want to transform the gradient for each
<rect>individually, I can't do that without defining a<linearGradient>for each individual<rect>, since thegradientTransformproperty is only allowed on gradient elements.
I'm just confused because ChatGPT told me I can put gradientTransform on my <rect> but MDN says
>You can use this attribute with the following SVG elements:
> - <linearGradient>
> - <radialGradient>
So I need individual <linearGradient>s for each <rect>?
答案1
得分: 2
是的，对于每个变换，您需要不同的渐变。但是SVG渐变元素支持一些模板化：
大多数绘制服务器元素接受href属性，它可以用来将兼容的绘制服务器元素定义为模板。如果当前元素上没有指定相应属性，那么将使用模板元素定义的属性，而且如果当前元素除了描述性元素之外没有子内容，那么模板元素的子内容会被克隆以替换它。
就像这样：
<linearGradient id="grad0" x1="0" y1="0" x2="1" y2="1">
<stop offset="5%" stop-color="#A8F" />
<stop offset="95%" stop-color="#FDC" />
</linearGradient>
<linearGradient id="grad1" href="grad0" gradientTransform="rotate(30)" />
<linearGradient id="grad2" href="grad0" gradientTransform="rotate(60)" />
这将允许您在grad1和grad2中使用grad0作为模板，同时应用不同的渐变变换。
英文:
Yes, you will need a different gradient for each transformation. But the SVG gradient elements support a bit of templating:
> Most paint server elements accept an href attribute, which can be used to define a compatible paint server element as a template. Attributes defined for the template element are used instead of the initial value if corresponding attributes are not specified on the current element. Furthermore, if the current element does not have any child content other than descriptive elements, than the child content of the template element is cloned to replace it.
Like this:
<linearGradient id="grad0" x1="0" y1="0" x2="1" y2="1">
<stop offset="5%" stop-color="#A8F" />
<stop offset="95%" stop-color="#FDC" />
</linearGradient>
<linearGradient id="grad1" href="grad0" gradientTransform="rotate(30)" />
<linearGradient id="grad2" href="grad0" gradientTransform="rotate(60)" />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论