Question

我刚刚开始使用按钮并且一直尝试以英寸而不是像素工作，这可能吗？如果是这样，我该如何使用英寸？似乎某些功能接受英寸而有些功能不接受？

// This works
var s = Snap("1.5in", "1.5in");

// This works
s.rect("0in", "0in", "1.5in", "1.5in").attr({
    stroke: "#f00",
    fill: "transparent"
});

// This works
s.path("M0,144L144,0").attr({
    stroke: "#f00"
});

// This fails (Error: Invalid value for <path> attribute d="M0in,0inL1.5in,1.5in")
s.path("M0in,0inL1.5in,1.5in").attr({
    stroke: "#f00"
});

Answer 1

正如您所发现的，某些SVG值只接受原始数字（解释为SVG用户坐标），而不是单位长度。路径“d”属性就是其中之一。

这不是snap.svg问题，而是基础SVG元素的工作方式。

最简单的方法是为自己创建转换因子。 SVG用户坐标的初始值是1个用户单位等于一个CSS“px”（像素）单位。 根据CSS标准，“px”单位正好等于“in”（英寸）单位的1/96。如果使用变换或viewBox属性缩放SVG，则所有{{3相应地缩放，因此比率保持不变。

因此，要创建一个等于"M0in,0inL1.5in,1.5in"的路径，您可以将每个数字乘以96，然后将该字符串连接在一起：

s.path("M0,0L" + 1.5*96 + "," + 1.5*96).attr({
    stroke: "#f00"
});

如果你有一个漫长而复杂的创建路径，值得一提的是length units比+运算符更有效，可以将一长串字符串和数字连接成一个字符串。< / p>

然而，请注意，CSS / SVG“in”单元并不总是在屏幕上显示为一英寸。如果您要打印文档，它应该非常准确。但是，当然，如果您正在缩放或转换SVG，它可能不会接近一英寸。

如何在snap svg中使用英寸？

1 个答案: