时间戳

首页 > 解决方案 > 带有负坐标的 SVG viewBox

html - 带有负坐标的 SVG viewBox

问题描述

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

我的方法是将形状包含在一个“符号”元素中，并给它一个与形状本身大小相同的 viewBox。

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

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

在下面的示例中，第一个形状是直接绘制的，第二个形状是从“使用”元素派生的。如果 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>

标签： htmlsvgviewbox

解决方案

这花了我一段时间来调试 - 我的问题是我将 viewbox 指定为viewbox而不是viewBox，所以 viewBox 甚至没有被应用。检查你的大小写！

推荐阅读