gpt4 book ai didi

html - 具有负坐标的 SVG viewBox

转载 作者:行者123 更新时间:2023-12-02 03:14:56 27 4
gpt4 key购买 nike

我想创建可重复使用的形状,这些形状在使用时会自动缩放以适应给定视口(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>

最佳答案

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

关于html - 具有负坐标的 SVG viewBox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56422877/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com