SVG путь не соблюдает соотношение сторон

Question

SVG путь не соблюдает соотношение сторон

0

У меня возникли проблемы с получением пути SVG к масштабу в его контейнер:

<svg xmlns="http://www.w3.org/2000/svg" 
  preserveAspectRatio="xMidYMid" 
  viewBox="0 0 16 16" 
  width="16" 
  height="16">
    <path stroke="#000" fill="none" d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"></path>
</svg>

Демо: http://jsfiddle.net/FeTv2/1/ - Как вы видите, путь слишком велик и, похоже, имеет верхнее и левое смещение.

Выглядит так же в Chrome и Firefox.

o01 20 сен. 2013, в 10:28

Источник

Теги:

html

svg

1 ответ

Ещё вопросы

Sirko · Accepted Answer · 2013-09-20T07-00-00.000Z

viewBox из SVG слишком мал, чтобы соответствовать используемому вами пути. viewBox представляет собой часть вашего SVG, которая должна быть показана. width и height представляют размер окна, в котором отображается содержимое.

Попробуйте размер viewBox, который действительно соответствует вашему пути (может потребоваться дальнейшая корректировка):

<svg height="16" width="16" 
     viewBox="0 0 450 450" 
     preserveAspectRatio="xMidYMid" 
     xmlns="http://www.w3.org/2000/svg">
    <path d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382" fill="none" stroke="#000"/>
</svg>

Кроме того, вы можете (или не можете) хотеть отрегулировать размер элемента <svg>.

Пример скрипта (большой <svg>)

Пример скрипта (16x16 <svg>)

Но я хочу, чтобы SVG отображался в формате 16x16. В этом смысл масштабирования всего до атрибутов 'width' и 'height', не так ли?
@Orolin Просто настройте viewBox и оставьте размеры <svg> маленькими.