【发布时间】：2016-02-04 12:36:12
【问题描述】：
我有一些 SVG 元素已经应用了一些模式。图案用作填充颜色。这意味着该模式填满了整个 SVG 元素。基本上我想使用模式部分填充我的元素。
从不同的来源，我发现我可以应用 线性渐变 来部分填充元素。
所以我的问题是我可以在图案上使用渐变还是有什么方法可以通过 pattern 部分填充元素？
注意 可以在原始元素（带有图案）上绘制（带有渐变）相同的元素来实现这一点。但是在它上面画一个相同的对象对我没有帮助。
我的尝试
<defs>
<pattern id="patternToApply" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="Firebrick"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="url(#patternToApply)"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
根据 Robert Longson 的评论，我尝试了以下操作：
第一
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="url(#gradientToApply)"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
第二
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" fill="url(#gradientToApply)">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="red"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
第三
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" fill="url(#gradientToApply)">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="url(#gradientToApply)"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
不幸的是仍然无法正常工作。
【问题讨论】：
-
您可以对构成图案的元素应用渐变。
-
感谢@RobertLongson 的评论，实际上我在关注您的thread 评论。实际上我已经尝试过这样做，但它不起作用。我正在更新我尝试过的问题。请让我知道我在哪里犯了错误。
-
@RobertLongson：我已经添加了我尝试过的内容，但仍然无法使其工作。引用渐变的正确方法是什么？
-
图案中的元素必须参考渐变，而不是图案本身。
-
我认为您指的是以下方式：
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse"> <rect id="rect" width="25" height="25" x="0" y="0" stroke-width="0" fill="url(#gradientToApply)"></rect> <image id="img" width="10px" height="10px" x="0" y="0" xlink:href="hash.gif"></image> </pattern> <linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%"> <stop offset="30%" stop-color="red"/> <stop offset="70%" stop-color="white"/> </linearGradient>但仍然无法正常工作
标签： html svg linear-gradients