请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
很多时候,我们希望在pattern标签中使用绝对值而不是百分比做尺寸单位,正如在绝大多数的svg子标签默认的一样。这能否可以实现?必须的!我们要做的仅是,给pattern指定用户空间的坐标单元。所谓用户空间坐标单元,指的是使用引用pattern图案的元素的坐标系统,定义如下:
patternUnits="userSpaceOnUse | objectBoundingBox"
本节我们单讲 patternUnits。
patternUnits属性用于定义pattern单元,具体指坐标系统,缺省、默认值是 objectBoundingBox,使用的坐标系统是pattern相对系统,pattern的x、y、width、height等属性要求使用百分比做单位;另一个值 userSpaceOnUse 如果设定,则使用引用者(当前用户)的坐标系统——通常,像 circle、rect 等标签,它们使用绝对数值表示位置和尺寸,比如 60,默认就是 60px,希望是别的单位,则可以加上,例如 60cm、60% 等等。下面的代码,我们定义了patternUnits 为 userSpaceOnUse,故而pattern的宽高属性值不再使用百分比:
<svg width="600" height="600" style="border: 1px solid gray;">
<defs>
<pattern id="p1" width="60" height="60" patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
<polygon fill="olive" points="0 30,30 0,60 30,30 60" />
</pattern>
</defs>
<-- 矩形尺寸占满svg视口 -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#p1)" />
</svg>
代码中,pattern设置了viewBox属性,因此pattern的width和height尺寸变化不会改变图案的个体形状,请调节宽高尺寸查看效果:
【结语】
pattern 的 patternUnits 属性用于定义图案所使用的坐标系统,它作用于pattern的 x、y、width、height 属性值的体现是,当 patternUnits="userSpaceOnUse" 时,这些属性值跟随引用者(用户标签)使用绝对数值,否则,当 patternUnits="objectBoundingBox" 或 该数值不设置时,定位和宽高属性的数值使用百分比相对值(相对于pattern自身的坐标系统)。
pattern还有几个属性以及其他可以继续探讨的知识,但我们的任务已经完成,如果希望更完整地理解pattern,可以自行扩展。
|