SVG_24_pattern标签_使fill填充_stroke描边多姿多彩

SVG Pattern 实践

最新推荐文章于 2025-05-13 14:44:21 发布

原创

最新推荐文章于 2025-05-13 14:44:21 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#SVG #Xi说SVG #pattern

本文介绍如何使用SVG的Pattern元素创建可重复的图形样式，应用于填充和描边，以实现丰富多彩的视觉效果。通过实例展示了Pattern元素的基本用法，包括定义图案、应用到图形元素上的方法及如何利用动画增强表现力。

知识点

pattern标签

定义：使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素。pattern元素让预定义图形能够以固定间隔在x轴和y轴上重复（或平铺）从而覆盖要涂色的区域。先使用pattern元素定义图案，然后在给定的图形元素上用属性fill或属性stroke引用用来填充或描边的图案。

重点：

使用pattern，可以指定各种各样的样式，然后把样式应用到fill填充或者stroke描边中，使控件多彩炫目

pattern定义好的一个样式，在应用到其他控件中时，会自动平铺。

stroke或fill通过url(#id)引用即可。

关键代码

    <defs>        <pattern id="prefix__e" width="10" height="10" patternUnits="userSpaceOnUse">            <path d="M2 2h8v5H2z"/>        </pattern>    </defs>    <circle cx="160" cy="280" r="50" fill="none" stroke="url(#triangle)" stroke-width="25">        <animateTransform attributeName="transform" type="rotate" from="0 160 280" to="360 160 280" dur="10s" repeatCount="indefinite"/>    </circle>