svg中的简单填充图案:对角线阴影线
我如何填充SVG形状,而不是单色,图像或渐变,但如果可能的话,使用阴影图案,对角线.
已经2个小时了,我什么都没发现(至少在2005年之后).
我认为一个可能的黑客将是一个孵化的PNG,可以作为填充,但这并不理想.
Ing*_*gel 94
我也没有在互联网上找到任何对角线阴影线,所以我将在这里分享我的解决方案:
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
<path d="M-1,1 l2,-2
M0,4 l4,-4
M3,5 l2,-2"
style="stroke:black; stroke-width:1" />
</pattern>
(注意路径表达式中的小写"l")
上面创建了一个舱口,从左下角到右上角的对角线相隔4个像素.在对角线(M0,4 l4,-4)旁边,你还必须划过图案区域的左上边缘和右下边缘,因为否则线条会因为与正方形边缘相交的剪裁而"收缩".
要使用此模式填充矩形,请执行以下操作:
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
- 我不得不在模式中的路径中添加一个样式,以使其变得可见:例如(像akarve):style ="stroke:black; stroke-width:1" (4认同)
- “香肠串”效果可能是由抗锯齿引起的。尝试添加`shape-rendering =“ cripsEdges”`。 (3认同)
- @Ingo Kegel 请原谅我的提问，但我在网上找不到解释，我如何将参数更改为 10 而不是 4 的距离？ (3认同)
- 谢谢！这是一个非常简单的解决方案。我还可以轻松地将“描边：黑色”更改为“描边：#386cb0”。但如何更改背景呢？ (3认同)
aka*_*rve 49
使用patternTransform属性旋转垂直(或水平)线段.此方法无缝切片并使用最简单的路径.pattern width属性控制平行阴影的接近程度.
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:1" />
</pattern>
- 到目前为止的最佳解决方案:简单(没有复杂的几何形状)和灵活(可以设置任何旋转角度,`width`模式属性设置条纹之间的间隙).为了使它更简单,我会使用`<line x1 ="0"y1 ="0"x2 ="0"y2 ="2"style ="stroke:black; stroke-width:1"/>`in lieu "<g> ... </ g>`. (3认同)
- @YannicKlem设置背景颜色,在`<line />之前添加`<rect x ="0"y ="0"width ="10"height ="10"style ="fill:skyblue"/>` . (3认同)
- 更简单：使用 `<rect>` 而不是 `<line>`，并使您的图案大小为 10x1 而不是 10x10。 (2认同)
Sir*_*rko 13
您可以使用<pattern>标签创建所需内容.
作为起点,您可以采用相应MDN文档的示例:
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="Triangle"
width="10" height="10"
patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10"/>
</pattern>
</defs>
<circle cx="60" cy="60" r="50"
fill="url(#Triangle)"/>
</svg>- 可以在此处找到一些示例:http://www.carto.net/svg/samples/patterns.shtml (2认同)
Nob*_*obu 13
来自http://bl.ocks.org/jfsiii/7772281的代码看起来非常干净且可重用:
svg {
width: 500px;
height: 500px;
}
rect.hbar {
mask: url(#mask-stripe)
}
.thing-1 {
fill: blue;
}
.thing-2 {
fill: green;
} <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg>
<defs>
<pattern id="pattern-stripe"
width="4" height="4"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45)">
<rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
</pattern>
<mask id="mask-stripe">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
</mask>
</defs>
<!-- bar chart -->
<rect class="hbar thing-2" x="0" y="0" width="50" height="100"></rect>
<rect class="hbar thing-2" x="51" y="50" width="50" height="50"></rect>
<rect class="hbar thing-2" x="102" y="25" width="50" height="75"></rect>
<!-- horizontal bar chart -->
<rect class="hbar thing-1" x="0" y="200" width="10" height="50"></rect>
<rect class="hbar thing-1" x="0" y="251" width="123" height="50"></rect>
<rect class="hbar thing-1" x="0" y="302" width="41" height="50"></rect>
</svg>
</body>
</html>小智 7
在图案内绘制对角线的一个问题是,当图案被平铺时,线条将不总是排列 - 特别是在高变焦时.(这取决于您碰巧使用的SVG渲染引擎).@ Ingo上面的回答试图通过在左上角和右下角绘制三角形来解决这个问题 - 但是,再次使用一些渲染引擎和高变焦,它并不总是看起来最好 - 有时线条最终会看起来有点像一串香肠.
另一种方法是在图案中绘制水平线并旋转图案,例如
<svg:svg viewBox="0 0 100 100" version="1.1"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg:defs>
<svg:pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45 2 2)">
<svg:path d="M -1,2 l 6,0" stroke="#000000" stroke-width="1"/>
</svg:pattern>
</svg:defs>
<svg:rect x="0" y="0" height="100" width="100" fill="url(#diagonalHatch)"/>
这两个资源非常有用:https : //bocoup.com/weblog/using-svg-patterns-as-fills https://github.com/iros/patternfills/blob/master/public/patterns.css
例如:
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
<rect width='10' height='10' fill='red'/>
<path d='M-1,1 l2,-2
M0,10 l10,-10
M9,11 l2,-2' stroke='orange' stroke-width='2'/>
</svg>
我尝试过这个样本。希望它能对您有很大帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="stripes" viewBox="0,0,8,8" width="16" height="16" patternUnits="userSpaceOnUse">
<polygon points="0,0 4,0 0,4" fill="yellow"></polygon>
<polygon points="0,8 8,0 8,4 4,8" fill="yellow"></polygon>
<polygon points="0,4 0,8 8,0 4,0" fill="green"></polygon>
<polygon points="4,8 8,8 8,4" fill="green"></polygon>
</pattern>
</defs>
<rect fill="url(#stripes)" x="150" y="20" width="100" height="50" />
<circle cx="50" cy="50" r="50" fill="url(#stripes)"/>
</svg>
</body>
</html> 问候， 武潘
| 归档时间： |
|
| 查看次数： |
54542 次 |
| 最近记录： |