Question

我想创建可重复使用的形状，该形状将在使用时自动缩放以适合给定viewPort的大小。

我的方法是将形状封装在一个'symbol'元素中，并为其提供一个与形状本身大小相同的viewBox。

这似乎可以用于圆和矩形，但是我在使用路径绘制菱形时遇到麻烦。

我通过创建一个（-1，-1，width + 2，height + 2）的viewBox找到了一个解决方案，但是我想知道这是否得到正式支持，或者是否有更好的解决方案。 / p>

在下面的示例中，第一个形状是直接绘制的，第二个形状是从'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>

Answer 1

似乎支持原点的负坐标：https://www.w3.org/TR/SVG/coords.html 表示对“视图框”的前两部分没有限制。我在其他地方看到人们有时在视窗上使用负坐标。

具有负坐标的SVG viewBox

1 个答案: