SVG viewBox с отрицательными координатами - PullRequest
Новая
       22

SVG viewBox с отрицательными координатами

0 голосов
/ 03 июня 2019

Я хочу создать многократно используемые фигуры, которые будут автоматически масштабироваться в соответствии с размером заданного viewPort при использовании.

Мой подход заключается в том, чтобы заключить фигуру в элемент 'symbol' и придать ейviewBox с тем же размером, что и сама фигура.

Кажется, это работает с кругом и прямоугольником, но у меня возникли проблемы с ромбовидной формой, нарисованной с использованием пути.

У меня естьнашел решение путем создания viewBox (-1, -1, ширина + 2, высота + 2), но я хотел бы знать, если это официально поддерживается, или есть лучшее решение.

В следующем примере первая фигура рисуется напрямую, вторая фигура получается из элемента use.Если viewBox начинается с '0, 0', левый и верхний пиксели отсутствуют. 

<html>

<svg width="200" height="200"
  style="margin:20px; border: 1px solid gray">
<path d="M 80 0 L 0 80 L 80 160 L 160 80 Z"
  stroke="black" stroke-width="2"
  stroke-linejoin="round" fill="transparent"
  transform="translate(20, 20)"/> 
</svg>

<svg style="display:none">
<symbol id="gw" viewBox="-1 -1 162 162">
  <path d="M 80 0 L 0 80 L 80 160 L 160 80 Z"
  stroke="black" stroke-width="2"
  stroke-linejoin="round" fill="transparent"/> 
</symbol>
</svg>

<svg width="200" height="200"
  style="margin:20px; border: 1px solid gray">
	<use href="#gw" width="160" height="160" transform="translate(20, 20)"/>
</svg>
  
</html>
...