html - 缩放 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