Как убрать лишний отступ у SVG?

Question

Вставил на свой сайт SVG. Образовались отступы, как их можно убрать?

Код:


<g transform="translate(1.00000000000006,5.684341886080802e-14) scale(0.750)">
<g transform="translate(17.51851851851848,16.74074074074076)">\
<path stroke="#FF8C00" fill="orange" fill-opacity="1" d="m 0,4 A 4,4 0 0,1 4,0 H 12 c 2,0 3,1 4,2 l 4,4 c 1,1 2,2 4,2 h 12 c 2,0 3,-1 4,-2 l 4,-4 c 1,-1 2,-2 4,-2 H 310.3671875 a 4,4 0 0,1 4,4 v 40  a 4,4 0 0,1 -4,4 H 48   c -2,0 -3,1 -4,2 l -4,4 c -1,1 -2,2 -4,2 h -12 c -2,0 -3,-1 -4,-2 l -4,-4 c -1,-1 -2,-2 -4,-2 H 4 a 4,4 0 0,1 -4,-4 z"></path>
</g>
</g>
</svg>```

Answer 1

Горячая просьба на будущее, - код приводить полностью здесь, в сниппете. Не очень здорово вглядываться и набивать недостающий код со скриншота. :-)

Итак, ваш код SVG c моими добавлениями для отладки:

Добавлена красная рамка, которая показывает границы холста SVG
Добавлен метод JS getBBox() для определения размеров прямоугольника, описывающего ваш элемент SVG path id="p1"

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="310" height="77px" viewBox="0 0 310 77" style="border:1px solid red;" >  
<g  transform="translate(1.00000000000006,5.684341886080802e-14) scale(0.750)">
<g transform="translate(17.51851851851848,16.74074074074076)">
<path id="p1" stroke="#FF8C00" fill="orange" fill-opacity="1" d="m 0,4 A 4,4 0 0,1 4,0 H 12 c 2,0 3,1 4,2 l 4,4 c 1,1 2,2 4,2 h 12 c 2,0 3,-1 4,-2 l 4,-4 c 1,-1 2,-2 4,-2 H 310.3671875 a 4,4 0 0,1 4,4 v 40  a 4,4 0 0,1 -4,4 H 48   c -2,0 -3,1 -4,2 l -4,4 c -1,1 -2,2 -4,2 h -12 c -2,0 -3,-1 -4,-2 l -4,-4 c -1,-1 -2,-2 -4,-2 H 4 a 4,4 0 0,1 -4,-4 z"></path>
</g>
</g>
</svg>
<script>
console.log(p1.getBBox())
</script>

Заменяем цифры в шапке SVG на размеры выведенные в консоли

width="314" height="56px" viewBox="0 0 314 56"

Обратите внимание, что я обнулил все transform="translate(0,0)" и сделал scale(1) они теперь не нужны.

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="314" height="56px" viewBox="0 0 314 56" style="border:1px solid red;" >  
<g  transform="translate(0,0) scale(1)">
<g transform="translate(0,0)">
<path id="p1" stroke="#FF8C00" fill="orange" fill-opacity="1" d="m 0,4 A 4,4 0 0,1 4,0 H 12 c 2,0 3,1 4,2 l 4,4 c 1,1 2,2 4,2 h 12 c 2,0 3,-1 4,-2 l 4,-4 c 1,-1 2,-2 4,-2 H 310.3671875 a 4,4 0 0,1 4,4 v 40  a 4,4 0 0,1 -4,4 H 48   c -2,0 -3,1 -4,2 l -4,4 c -1,1 -2,2 -4,2 h -12 c -2,0 -3,-1 -4,-2 l -4,-4 c -1,-1 -2,-2 -4,-2 H 4 a 4,4 0 0,1 -4,-4 z"></path>
</g>
</g>
</svg>
<script>
console.log(p1.getBBox())
</script>

БЛОГ НА HUSL

Как убрать лишний отступ у SVG?

Ответы (1 шт):