0

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

// 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"
});
4

1 回答 1

1

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

这不是 snap.svg 问题，这就是底层 SVG 元素的工作方式。

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

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

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

如果您要创建一条又长又复杂的路径，那么值得一提的是，它比将一长串字符串和数字连接成一个字符串Array.join("")的运算符更有效。+

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

于 2014-04-15T23:26:50.297 回答