Блог

У меня есть следующий SVG-файл, который включает полилинию

 <?xml version="1.0" encoding="utf-8"?>
<svg 
    width="280"
    height="280"
    viewBox="0 0 140 140"
    stroke="blue"
    fill="none">
<polyline points="21,14 18,14 15,7 10,17 7,11 5,14 3,14" />
</svg>  

Исходный размер составляет 48×48 пикселей, я пытаюсь увеличить общий масштаб SVG до 280×280 пикселей (прежде чем я отправлю его для отображения в формате PNG).

Я попытался увеличить параметры width, height и viewBox, однако полилинии, очевидно, не совпадают по размеру. Есть ли какой-нибудь способ сделать это?

В вашем примере я добавил границу к элементу svg. Теперь вы можете видеть, что происходит. Графика крошечная по сравнению с окном просмотра. Чтобы сделать это правильно, вам нужно знать ограничительную рамку многоугольника let bb = document.querySelector("polyline").getBBox(); и использовать результат для значения окна просмотра

 let bb = document.querySelector("polyline").getBBox();
console.log(bb)  

 svg{border:solid}  

 <?xml version="1.0" encoding="utf-8"?>
<svg 
    width="280"
    height="280"
    viewBox="0 0 140 140"
    stroke="blue"
    fill="none">
<polyline points="21,14 18,14 15,7 10,17 7,11 5,14 3,14" />
</svg>  

Ограничивающий прямоугольник ломаной линии:

 {
  "x": 3,
  "y": 7,
  "width": 18,
  "height": 10
}
  

Я использую эти значения для создания нового значения окна просмотра.

Далее идет пример, в котором я меняю viewBox на viewBox=»3 7 18 10″. Пожалуйста, обратите внимание, что теперь svg-элемент имеет другое соотношение сторон. Элемент svg имеет квадратную форму, а окно просмотра имеет ширину 18 и высоту 10. По умолчанию значение preserveAspectRatio xMidYMid выравнивает среднее значение Y поля просмотра элемента со средним значением Y области просмотра.

 svg{border:solid}  

 <?xml version="1.0" encoding="utf-8"?>
<svg 
    width="280"
    height="280"
    viewBox="3 7 18 10"
    stroke="blue"
    fill="none">
<polyline points="21,14 18,14 15,7 10,17 7,11 5,14 3,14" />
</svg>