logo标签列表

SVG视口框架与负坐标

htmlsvgviewbox
3
我想创建可重复使用的形状，当使用时会自动缩放以适应给定视口的大小。
我的方法是将形状包含在“symbol”元素中，并为其提供与形状本身相同大小的“viewBox”。
这似乎适用于圆形和矩形，但我在使用路径绘制的菱形上遇到了麻烦。
我通过创建(-1，-1，width+2，height+2)的viewBox找到了一个解决方案，但我想知道它是否得到了官方支持，或者是否有更好的解决方案。
在下面的示例中，第一个形状直接绘制，第二个形状派生自“use”元素。如果viewBox以“0, 0”开头，则左侧和顶部像素会丢失。
最初的回答：我想创建可重复使用的形状，当使用时会自动缩放以适应给定视口的大小。
我的方法是将形状包含在“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>

在这种情况下，您需要将 viewBox="0 0 160 160" 添加到 SVG 元素中并删除 transform 属性。需将 viewBox 的大小设置为菱形的边界框大小。要获取 SVG 元素的边界框，您可以使用 JavaScript 中的 getBBox() 方法：lozenge.getBBox()。 - enxaneta
谢谢。'transform' 只是为了将形状放置得好看一些。关于 getBBox()，它似乎返回基于任何周围路径的中心的尺寸，而不是外边缘，因此我必须根据描边宽度进行补偿。 - Frank Millman
我意识到我表达不够清晰，我谈到了“缩放”形状以适应视口，这是我的目标。但在我的示例中，我并没有尝试缩放，我只是想使用viewBox使第二个形状与第一个形状相同。 - Frank Millman
在没有进一步的评论的情况下，我将继续基于我的方法是可行的。它适用于Chrome、Edge和Firefox。问题似乎是getBBox()不包括周围的描边，因此如果您使用getBBox()返回的尺寸创建一个viewBox，当您尝试使用它时，形状会被裁剪。允许viewBox以负值开始，并延伸超出给定的宽度和高度（取决于描边宽度的值），可以解决这个问题。 - Frank Millman
2
或者你可以尝试使用 svg{overflow:visible}。 - enxaneta
1
@enxaneta 谢谢你，因为我正在努力修复大量子SVG，而你的解决方案只是简单而有效地解决了问题。 - Athinodoros Sgouromallis
2个回答
4

这让我调试了一段时间 - 我的问题在于我将视口指定为viewbox而不是viewBox，因此视口甚至没有被应用。检查您的大小写！

2
似乎支持使用负坐标作为原点：https://www.w3.org/TR/SVG/coords.html 表明“视图框”的前两个部分没有限制。我在其他地方看到过人们有时会在视图框上使用负坐标。
我同意，“<width>或<height>的负值是一个错误，并使‘viewBox’属性无效”，但没有提到min-x / min-y的负值。此外，我在这里看到对负min-y的规范：https://observablehq.com/@d3/selection-join - Joshua Richardson
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接