3

При использовании stroke svg выходит за рамки viewbox. Как это исправить?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 441 394.36">
  <path fill="none" stroke="black" stroke-width="35" d="M329.9,1.5c60.56,0,109.6,49.03,109.6,109.47c0,109.47-109.6,171.8-219.06,281.27C110.97,282.77,1.5,220.44,1.5,110.97C1.5,50.53,50.54,1.5,110.97,1.5c54.73,0,82.1,27.37,109.47,82.1 C247.8,28.87,275.17,1.5,329.9,1.5z" />
</svg>

1

2 ответа 2

3

Очень часто бывают случаи, что невозможно методом "тыка" поймать нужные параметры viewBox

В этом случае выручит метод JS getBBox()

<svg xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="0 0 441 394.36" style="border:1px solid red;">
  <path id="p1" fill="none" stroke="black" stroke-width="35"  d="M329.9,1.5c60.56,0,109.6,49.03,109.6,109.47c0,109.47-109.6,171.8-219.06,281.27C110.97,282.77,1.5,220.44,1.5,110.97C1.5,50.53,50.54,1.5,110.97,1.5c54.73,0,82.1,27.37,109.47,82.1 C247.8,28.87,275.17,1.5,329.9,1.5z" />
</svg> 
<script>
console.log(p1.getBBox());
</script>

Подставляем получившиеся значения во viewBox

<svg xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="1.5 1.5 438 390.74" style="border:1px solid red;">
  <path id="p1" fill="none" stroke="black" stroke-width="1"  d="M329.9,1.5c60.56,0,109.6,49.03,109.6,109.47c0,109.47-109.6,171.8-219.06,281.27C110.97,282.77,1.5,220.44,1.5,110.97C1.5,50.53,50.54,1.5,110.97,1.5c54.73,0,82.1,27.37,109.47,82.1 C247.8,28.87,275.17,1.5,329.9,1.5z" />
</svg> 
<script>
console.log(p1.getBBox());
</script>

Но getBBox()выводит параметры прямоугольника, описывающего фигуру svg без учета stroke-wifth А она у нас 34

Второй момент,- при широкой строке, внешняя часть (половина строки) уйдет за пределы холста SVG (красная рамка) поэтому это надо учесть и изменить соответственно параметры viewBox

Было по расчетам getBBox() viewBox="1.5 1.5 438 390.74" Прибавляем 34 (по половине строки с каждой стороны)

Стало

viewBox="-15.5 -15.5 472 424.74

<svg xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-15.5 -15.5 472 422.74" style="border:1px solid red;">
  <path id="p1" fill="none" stroke="black" stroke-width="34"  d="M329.9,1.5c60.56,0,109.6,49.03,109.6,109.47c0,109.47-109.6,171.8-219.06,281.27C110.97,282.77,1.5,220.44,1.5,110.97C1.5,50.53,50.54,1.5,110.97,1.5c54.73,0,82.1,27.37,109.47,82.1 C247.8,28.87,275.17,1.5,329.9,1.5z" />
</svg> 
<script>
console.log(p1.getBBox());
</script>

3
  • Совсем забыл про этот метод
    – kertAW
    Commented 26 мар. 2021 в 17:38
  • 2
    @Sevastopol' Да, всё верно Это наиболее частые вопросы: почему, обрезается фигура, почему svg не на месте или вообще не виден и всё это великий и ужасный viewBox/ В этом примере хоть не было масштабирования Commented 26 мар. 2021 в 17:39
  • @Voprositel старайтесь делать отступы от краев SVG документа, если конечно рисуете сами. И тогда не будет таких сюрпризов. Commented 26 мар. 2021 в 17:56
3

Я так полагаю, нужно viewBox="-16 -16 474 433" ?

body {margin: 0; padding: 0;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-16 -16 474 433">
  <path fill="none" stroke="black" stroke-width="35" d="M329.9,1.5c60.56,0,109.6,49.03,109.6,109.47c0,109.47-109.6,171.8-219.06,281.27C110.97,282.77,1.5,220.44,1.5,110.97C1.5,50.53,50.54,1.5,110.97,1.5c54.73,0,82.1,27.37,109.47,82.1 C247.8,28.87,275.17,1.5,329.9,1.5z" />
</svg>

1
  • 2
    Блин.. Точно, можно же было отрицательный viewbox использовать, а я изображение двигал и уменьшал :D (с меня +)
    – De.Minov
    Commented 26 мар. 2021 в 16:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.