在SVG中混合笔画宽度单位

时间:2017-06-19 21:15:00

标签: svg

在我添加一个viewBox之前,这似乎正常工作(因为路径是用户单元所必需的)。

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="7in" height="7in" viewBox="0 0 7 7">
<rect x="2" y="2" width="1" height="1" style="fill:none;stroke-width:1px;stroke:rgb(0,0,0)" />
</svg>

现在,如果我查看inkscape,笔画宽度为90px(1in)。另外,如果我以英寸为单位指定矩形大小或位置,它会比我想象的要大得多(或移动到更大的坐标)。我知道我错过了一些东西,但通过视图框和视口文档阅读并没有引导我任何启发(他们主要讨论像素)。有人能引导我朝着正确的方向前进吗?

1 个答案:

答案 0 :(得分:1)

没有viewBox,你有一个7in square的视口。在CSS 1in is always 96px中,您的视口将是96像素。如果你画了一个矩形1英寸,它将占据96个像素的屏幕。 (Inkscape可能会做一些不同的事情,但所有浏览器都使用96px = 1in)。

添加视图框时,可以在混合中添加缩放。您的绘图上的1px可能不再代表屏幕上的1px。即你绘图上的1in仍然是你的绘图上96px但屏幕上不再是96像素。

你当前的viewBox表示屏幕上的7px现在是7英寸或7 x 96像素,所以图纸上的所有内容都放大了96倍。图纸上的1英寸现在是96 x 96像素。