SVG больше чем path в нём, как сравнять их размеры?

Question

[PochemuIKak]

https://jsfiddle.net/WEB_DIMITRIY/7dbgjf4u/1/
Скопировал SVG кнопку с фигма и после удаления теней заметил, что размер svg больше чем его содержимое (path). Можно ли сравнять их размеры, чтобы нормально использовать hover?

Answer 1

[nowm]

Размер SVG можно задать с помощью атрибута viewBox. Например, эта картинка имеет размер 160 на 90:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90">
</svg>

Кроме манипулирования размером самого SVG можно менять размер path без редактирования самого пути. Это делается с помощью атрибута transform. Например, на следующей картинке все 3 path прописаны под размер SVG, но из-за применяемого масштабирования красная область занимает 80%, зелёная — 40%, а синяя — 20%.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90">
    <path d="M0 0L160 0L160 90L0 90L0 0" fill="#ff0000" transform="scale(0.8)"/>
    <path d="M0 0L160 0L160 90L0 90L0 0" fill="#00ff00" transform="scale(0.4)"/>
    <path d="M0 0L160 0L160 90L0 90L0 0" fill="#0000ff" transform="scale(0.2)"/>
</svg>

Comments

[PochemuIKak]

Спасибо за ваш ответ, так и решил проблему. Только еще добавив во viewbox смещение.