我很困惑为什么缩放的平铺图案不能与它所应用的对象的边框完美对齐: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"
以及x
和y
的{{1}}和pattern
rect
是相同的,但看起来模式略有偏移。
我确定如果您将模式的x
和y
设置为37.5 (= 15 / .4)
,那么边框会正确排列;但是,是否有更清洁的方法来实现同样的目标?如果不是矩形,你有一个相等的旋转一定量的路径,这就变得尤其成问题。我甚至不确定如何正确定位和排列模式。