如何设置填充图案样式的SVG

Question

我已经写了一些SVG：

<?xml version="1.0" standalone="no"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg width="100%" height="100%" version="1.1" 
xmlns="http://www.w3.org/2000/svg"> 

<ellipse cx="150" cy="75" rx="100" ry="75" fill="rgb(200,240,120)" stroke="rgb(200,240,120)" stroke-width="3px" /> 
</svg> 

它使得like this

我要转换的填充颜色渲染效果look like this

我已经阅读了关于SVG的w3c文档。我尝试过滤器，但它不像这些图像。

Answer 1

你想要做的就是所谓的“孵化模式”。做一个网络搜索如何在SVG中做到这一点。基本上你需要使用<pattern>元素来定义你的舱口。

以下SO问题可以帮助你：Simple fill pattern in svg : diagonal hatching

注意，未完成SVG2标准定义了一个新<hatch> element，这将使创建填充图案轻松了许多。然而，你还不能使用它，因为没有浏览器实现了<hatch>。