縮放SVG背景

Question

我有兩個不同大小的html元素，我想爲兩個元素使用相同的svg背景，以便它自動縮放到每個元素的大小。

.bg { 
     background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M 20 0 L 40 14 L 32 36 L 8 36 L 1 14 z' stroke='#000' stroke-width='2px' fill='red' /></svg>") 
} 

#x { 
    width:40px; 
    height:40px; 
    border:1px solid red; 
} 

#y { 
    width:120px; 
    height:120px; 
    border:1px solid red; 
} 

基本上，我想在y的多邊形爲y的寬度的100％，同時保持兩者的div相同（不一定給出）SVG。

http://jsfiddle.net/zNdLb/

Answer 1

我想你想是這樣的，那麼：

.bg { 
     background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%20-2%2042%2042%22%3E%3Cpath%20d%3D%27M%2020%200%20L%2040%2014%20L%2032%2036%20L%208%2036%20L%201%2014%20z%27%20stroke%3D%27%23000%27%20stroke-width%3D%272px%27%20fill%3D%27red%27%20%2F%3E%3C%2Fsvg%3E") 
} 

注意，您張貼什麼not a valid data URI和許多UA將拒絕顯示它，因爲它包含無效字符，如<和>

未轉義的SVG看起來像這樣。這是造成差異的viewBox。

<svg xmlns='http://www.w3.org/2000/svg' width="100%" height="100%" viewBox="0 -2 42 42"> 
    <path d='M 20 0 L 40 14 L 32 36 L 8 36 L 1 14 z' stroke='#000' stroke-width='2px' fill='red' /> 
</svg> 

我以前this將其轉換爲有效的數據URI