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会拒绝显示它，因为它包含无效字符，例如＆lt;和＆gt;

未转义的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

扩展SVG背景

1 个答案: