Масштабирование фона SVG

Question

Масштабирование фона SVG

0

У меня есть два элемента 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-полигон составлял 100% от ширины y, сохраняя при этом одинаковый (не обязательно заданный) SVG для обоих div.

http://jsfiddle.net/zNdLb/

georg 24 сен. 2013, в 16:44

Источник

Теги:

html

css

svg

1 ответ

Ещё вопросы

Robert Longson · Accepted Answer · 2013-09-24T13-47-00.000Z

Я думаю, вы хотите что-то вроде этого:

.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 не будут отображать его, поскольку он содержит недопустимые символы, такие как <и>

Unescaped 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 данных

Да, viewBox сделал viewBox дело. Большое спасибо!