在使用时设置SVG图案颜色 [英] Setting an SVG patterns color on usage

问题描述

我有一个简单的阴影模式：

I have a simple hatching pattern:

<defs>                                
  <pattern id="pattern1" patternUnits="userSpaceOnUse"
           x="0" y="0" width="10" height="10"
           >
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" />
    <line x1="0" y1="-10" x2="20" y2="10" stroke="black" />
    <line x1="-10" y1="0" x2="10" y2="20" stroke="black" />
  </pattern>
</defs>                               

<rect fill="url(#pattern1)" stroke="black" 
      x="100" y="100" width="200" height="100"/>

<rect fill="url(#pattern1)" stroke="red" 
      x="100" y="300" width="200" height="100"/>

在使用图案时是否可以设置图案中线条的颜色？例如，我想在第二个 rect 中将颜色设置为红色。

Is there a way to set the color of the lines in the pattern when using it? For example, I'd like to set the color to red in second rect.

推荐答案

如果更新图案中的颜色，将影响两个矩形。如果要在不同的区域使用不同的图案颜色，则必须使用不同的图案。

If you updated the colour in the pattern it would affect both rects. If you want different pattern colours in different rects you'll have to use different patterns.

这篇关于在使用时设置SVG图案颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！