我想在使用时更改图案的颜色。
例如,我想在红色描边的圆圈中添加绿色图案。
<svg width="300" height="300" viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="checked" width="2" height="2" stroke="black" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)"
patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="2"></line>
<line x1="0" y1="0" x2="2" y2="0"></line>
</pattern>
</defs>
<circle cx="60" cy="60" r="50" stroke="red" fill="url(#checked)"/>
<circle cx="120" cy="60" r="50" stroke="blue" fill="url(#checked)"/>
</svg>
http://codepen.io/anon/pen/RVNmRY
是否可以不必为每种颜色创建新图案而这样做?
我读过一条评论,说使用过滤器(https://stackoverflow.com/a/21427316/1981832)可能是可行的。但是我不知道如何。
最佳答案
如果您用所需的颜色填充圆圈,然后将图案用作 mask ,则可以使用此功能。这是绿色和洋红色的示例:
<svg width="300" height="300" viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="checked" width="2" height="2" stroke="white" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)"
patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="2"></line>
<line x1="0" y1="0" x2="2" y2="0"></line>
</pattern>
<mask id="checked-mask" x="0" y="0" width="1" height="1" >
<rect x="0" y="0" width="1000" height="1000" fill="url(#checked)" />
</mask>
</defs>
<circle cx="60" cy="60" r="50" stroke="red" mask="url(#checked-mask)" fill="green" />
<circle cx="120" cy="60" r="50" stroke="blue" mask="url(#checked-mask)" fill="magenta" />
</svg>
关于svg - 如何在使用时更改SVG图案的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43423317/