изменить размер HTML-изображения SVG - PullRequest
Новая
       25

изменить размер HTML-изображения SVG

0 голосов
/ 21 октября 2011

Я получаю удовольствие от небольшого эксперимента, пытаясь уменьшить http запросы и играть с svg вместо css3 ... Невозможно настроить HTML SVG для динамического масштабирования.В идеале я хотел бы установить ширину и высоту в 50% и позволить браузеру делать все остальное при изменении размера окна.

Вот код: 

<svg xmlns="http://www.w3.org/2000/svg">
  <title>Daniel Hutchinson</title>
  <g>
    <path d="m133.936,182.53101h-8.41701v77.21298h8.05002c21.40799,0 39.70398,-11.70999 39.70398,-38.60599c0.00101,-24.70099 -16.28299,-38.60699 -39.33699,-38.60699z" clip-rule="evenodd" fill-rule="evenodd"/>
    <path fill="black" d="m218.448,0c-120.646,0 -218.448,97.802 -218.448,218.448s97.802,218.448 218.448,218.448s218.448,-97.802 218.448,-218.448s-97.80301,-218.448 -218.448,-218.448zm-77.925,290.117h-50.86501v-137.95801h50.86501c38.423,0 70.07701,30.19 70.07701,68.97897s-31.83701,68.97903 -70.07701,68.97903zm210.22499,0h-35.862v-56.53699h-51.78v56.53699h-35.862v-137.95801h35.862v53.24402h51.78v-53.24402h35.862v137.95801l0,0z" clip-rule="evenodd" fill-rule="evenodd"/>
  </g>
</svg>

1 Ответ

1 голос
/ 22 октября 2011

Браузеры не будут масштабировать изображения SVG должным образом, если вы не дадите им viewBox, я быстро пришел к этим цифрам экспериментируя с JSFiddle , вы, вероятно, сможете разработать точные вейлы, необходимые без особых усилий.: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 600 600">

Вы также можете попробовать указать атрибуты width и height, разные браузеры реагируют на них по-разному, особенно когда вы затем изменяете их размер с помощью CSS.Некоторое время назад я создал тестовую страницу, которая пробовала все комбинации при встраивании SVG как изображения , стоит сравнить разные результаты в (например) Firefox и Chrome.Я ожидаю, что использование SVG в CSS даст аналогичные результаты.

...