У меня возникли проблемы с получением пути 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.
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>
.
viewBox
и оставьте размеры<svg>
маленькими.