0

サイズの異なる 2 つの 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;
}

基本的に、両方の div で同じ (必ずしも指定されていない) SVG を維持しながら、y のポリゴンを y の幅の 100% にしたいと考えています。

http://jsfiddle.net/zNdLb/

4

1 に答える 1

2

私はあなたがこのようなものが欲しいと思います：

.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")  
}

あなたが投稿したものは有効なデータ 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>

これを使用して有効なデータURIに変換しました

于 2013-09-24T15:11:15.803 に答える