将缩放的SVG图案应用于已转换的路径

时间:2013-12-03 23:06:32

标签: html image graphics svg tile

我很困惑为什么缩放的平铺图案不能与它所应用的对象的边框完美对齐:http://jsfiddle.net/J8xeR/

作为参考,模式定义如下:

<pattern id="tile" x="15" y="15" width="150" height="130"
    patternUnits="userSpaceOnUse" patternTransform="scale(.4,.4)">
    <image fill="#000000" width="150" height="130" preserveAspectRatio="none" xlink:href="http://good-b.com/wp-content/uploads/2011/06/star1.jpg"></image>
</pattern>

此外,该模式正在应用于此:

<rect x="15" y="15" width="150" height="130" style="fill: url(#tile);" />

我特别困惑,因为模式的patternUnits属性设置为"userSpaceOnUse"以及xy的{​​{1}}和pattern rect是相同的,但看起来模式略有偏移。

我确定如果您将模式的xy设置为37.5 (= 15 / .4),那么边框会正确排列;但是,是否有更清洁的方法来实现同样的目标?如果不是矩形,你有一个相等的旋转一定量的路径,这就变得尤其成问题。我甚至不确定如何正确定位和排列模式。

0 个答案:

没有答案