如何設置填充圖案樣式的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>。