如何在 svg 中设置填充图案样式答案

【问题标题】：How to set a hatch pattern style in a svg如何在 svg 中设置填充图案样式
【发布时间】：2016-08-23 08:51:19
【问题描述】：

我写了一些 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 文档。我试过过滤器，但它不像那些图像那样工作。

【问题讨论】：

不知道你在问什么，第二张图片看起来不像第一张？此外，fill 属性是填充的颜色代码。
第二个图片链接错误，我已经修复了链接。

标签： svg background

【解决方案1】：

您要执行的操作称为“填充图案”。在网上搜索如何在 SVG 中执行此操作。基本上你需要使用<pattern> 元素来定义你的舱口。

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

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

【讨论】：

我刚刚为 SO 文档写了一堆模式示例：stackoverflow.com/documentation/svg/3251/…
这就是我需要的。我看的SVG文档是1.0版本，是svg 2.0版本的新特性。非常感谢你。你的回答对我很有帮助。