html - 具有负坐标的 SVG viewBox-6ren

html - 具有负坐标的 SVG viewBox

转载作者：行者123 更新时间：2023-12-02 19:58:30

我想创建可重复使用的形状，这些形状在使用时会自动缩放以适应给定视口(viewport)的大小。

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

这似乎适用于圆形和矩形，但我在使用路径绘制菱形时遇到了问题。

我找到了一个解决方案，创建一个(-1, -1, width+2, height+2)的viewBox，但是我想知道官方是否支持这个，或者有没有更好的解决方案。

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