如何在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

您想要做的事情被称为“孵化模式”。在Web上搜索如何在SVG中执行此操作。基本上，您需要使用<pattern>元素定义填充。

以下SO问题可能会对您有所帮助：Simple fill pattern in svg : diagonal hatching

请注意，未完成的SVG2标准定义了一个新的<hatch> element，这将使创建填充图案变得更加容易。但是你还没有使用它，因为还没有浏览器实现<hatch>。