Выравнивание объектов в центре SVG

Как выравнивать объекты в центре тегов svg. Я могу настроить его, отрегулировав x, y cordiantes в viewbox. Но каждый раз мне нужно изменить значение в соответствии с размером объекта. Как я могу достичь центрирования объекта в SVG, соответствующего любому размеру объекта. Чтобы быть более ясным, я хочу, чтобы значок был центрирован по горизонтали и вертикали внутри красной границы. См мой код нижеВыравнивание объектов в центре SVG

svg{ 
 
    border:1px solid red; 
 
}

<svg height="20" width="20" viewBox="0 0 35 35"> 
 
\t <path fill="#6d6d6d" fill-rule="evenodd" d="M19.0625,8.75 C18.81,8.75 18.585,8.6475 18.415,8.4875 C18.41,8.4825 18.4025,8.4825 18.3975,8.4775 L16.0675,6.145 L10.1675,12.045 C9.5575,12.6525 8.5675,12.6525 7.9575,12.045 C7.3475,11.435 7.3475,10.445 7.9575,9.835 L13.855,3.9375 L11.5225,1.6025 C11.5175,1.5975 11.5175,1.59 11.5125,1.585 C11.3525,1.415 11.25,1.19 11.25,0.9375 C11.25,0.42 11.67,0 12.1875,0 L18.75,0 C19.44,0 20,0.56 20,1.25 L20,7.8125 C20,8.33 19.58,8.75 19.0625,8.75 Z M2.5,5.625 L2.5,16.875 C2.5,17.22 2.78,17.5 3.125,17.5 L14.375,17.5 C14.72,17.5 15,17.22 15,16.875 L15,10 L17.5,12.5 L17.5,17.5 C17.5,18.8825 16.3825,20 15,20 L2.5,20 C1.12,20 0,18.8825 0,17.5 L0,5 C0,3.62 1.12,2.5 2.5,2.5 L7.5,2.5 L10,5 L3.125,5 C2.78,5 2.5,5.28 2.5,5.625 Z"/> 
 
</svg>

источник

2017-01-10 Santhosh Kumar

Как вы придумали ViewBox из '35' пикселей в длину? У вас всегда есть «путь» разного размера в 35-пиксельном окне просмотра? – Yogu

Я использую этот значок в разных местах. я буду менять 35 - 25 в viewbox. В это время мне нужно вручную изменить координаты x, y, чтобы центрировать его. Поэтому я ищу динамическое решение, чтобы сосредоточиться на нем. –

Итак, почему вы указываете окно просмотра, которое не соответствует «пути», находящемуся в нем? Используете ли вы это для масштабирования? Затем вы можете масштабировать SVG с помощью 'width' и' height', а затем центрировать 'svg' в своем родительском элементе. – Yogu

Вы можете перемещать min-x и min-y координаты, чтобы поместить свое содержание в центре. Описание viewBox можно найти здесь: https://sarasoueidan.com/blog/svg-coordinate-systems/

Лучший способ пойти об этом, чтобы экспортировать файл с правильным кадрирования, чтобы получить его полностью выровнен по центру. Открыт ваш SVG (в Sketch) добавил невидимую рамку вокруг него 35 х 35px, она экспортируется в целом вещь и очистить его:

svg { 
 
    border: 1px solid red; 
 
}

<svg width="20px" height="20px" viewBox="0 0 35 35"> 
 
    <path fill="#6d6d6d" fill-rule="evenodd" d="M26.15625,16.875 C25.929,16.875 25.7265,16.78275 25.5735,16.63875 C25.569,16.63425 25.56225,16.63425 25.55775,16.62975 L23.46075,14.5305 L18.15075,19.8405 C17.60175,20.38725 16.71075,20.38725 16.16175,19.8405 C15.61275,19.2915 15.61275,18.4005 16.16175,17.8515 L21.4695,12.54375 L19.37025,10.44225 C19.36575,10.43775 19.36575,10.431 19.36125,10.4265 C19.21725,10.2735 19.125,10.071 19.125,9.84375 C19.125,9.378 19.503,9 19.96875,9 L25.875,9 C26.496,9 27,9.504 27,10.125 L27,16.03125 C27,16.497 26.622,16.875 26.15625,16.875 Z M11.25,14.0625 L11.25,24.1875 C11.25,24.498 11.502,24.75 11.8125,24.75 L21.9375,24.75 C22.248,24.75 22.5,24.498 22.5,24.1875 L22.5,18 L24.75,20.25 L24.75,24.75 C24.75,25.99425 23.74425,27 22.5,27 L11.25,27 C10.008,27 9,25.99425 9,24.75 L9,13.5 C9,12.258 10.008,11.25 11.25,11.25 L15.75,11.25 L18,13.5 L11.8125,13.5 C11.502,13.5 11.25,13.752 11.25,14.0625 Z" /> 
 
</svg>

источник

2017-01-10 07:34:41 mlunoe

вы можете использовать getBBox(), чтобы получить размер вашего пути, а затем настроить ваш Viewbox соответственно ...

var box=path.getBBox() 
 
svg.setAttribute("viewBox",`${box.x} ${box.y} ${box.width} ${box.height}`) 
 

 
console.log(box)

svg{border:1px solid red}

<svg id="svg" height="20" width="20" viewBox="0 0 35 35"> 
 
\t <path id="path" fill="#6d6d6d" fill-rule="evenodd" d="M19.0625,8.75 C18.81,8.75 18.585,8.6475 18.415,8.4875 C18.41,8.4825 18.4025,8.4825 18.3975,8.4775 L16.0675,6.145 L10.1675,12.045 C9.5575,12.6525 8.5675,12.6525 7.9575,12.045 C7.3475,11.435 7.3475,10.445 7.9575,9.835 L13.855,3.9375 L11.5225,1.6025 C11.5175,1.5975 11.5175,1.59 11.5125,1.585 C11.3525,1.415 11.25,1.19 11.25,0.9375 C11.25,0.42 11.67,0 12.1875,0 L18.75,0 C19.44,0 20,0.56 20,1.25 L20,7.8125 C20,8.33 19.58,8.75 19.0625,8.75 Z M2.5,5.625 L2.5,16.875 C2.5,17.22 2.78,17.5 3.125,17.5 L14.375,17.5 C14.72,17.5 15,17.22 15,16.875 L15,10 L17.5,12.5 L17.5,17.5 C17.5,18.8825 16.3825,20 15,20 L2.5,20 C1.12,20 0,18.8825 0,17.5 L0,5 C0,3.62 1.12,2.5 2.5,2.5 L7.5,2.5 L10,5 L3.125,5 C2.78,5 2.5,5.28 2.5,5.625 Z"/> 
 
</svg>

P.S .: просто сделать это один раз и изменить Viewbox вручную в коде ...

источник

2017-01-10 07:35:05

svg { 
 
    border: 1px solid red; 
 
} 
 
.svg--center{ 
 
    background: pink; 
 
    display: inline-block; 
 
    width: 100px; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class="svg--center"> 
 
    <svg height="20" width="20" viewBox="0 0 20 20"> 
 
\t <path fill="#6d6d6d" fill-rule="evenodd" d="M19.0625,8.75 C18.81,8.75 18.585,8.6475 18.415,8.4875 C18.41,8.4825 18.4025,8.4825 18.3975,8.4775 L16.0675,6.145 L10.1675,12.045 C9.5575,12.6525 8.5675,12.6525 7.9575,12.045 C7.3475,11.435 7.3475,10.445 7.9575,9.835 L13.855,3.9375 L11.5225,1.6025 C11.5175,1.5975 11.5175,1.59 11.5125,1.585 C11.3525,1.415 11.25,1.19 11.25,0.9375 C11.25,0.42 11.67,0 12.1875,0 L18.75,0 C19.44,0 20,0.56 20,1.25 L20,7.8125 C20,8.33 19.58,8.75 19.0625,8.75 Z M2.5,5.625 L2.5,16.875 C2.5,17.22 2.78,17.5 3.125,17.5 L14.375,17.5 C14.72,17.5 15,17.22 15,16.875 L15,10 L17.5,12.5 L17.5,17.5 C17.5,18.8825 16.3825,20 15,20 L2.5,20 C1.12,20 0,18.8825 0,17.5 L0,5 C0,3.62 1.12,2.5 2.5,2.5 L7.5,2.5 L10,5 L3.125,5 C2.78,5 2.5,5.28 2.5,5.625 Z"/> 
 
    </svg></div>

источник

2018-01-24 20:43:16 sandraqu

Выравнивание объектов в центре SVG

ответ

Смежные вопросы