SVG<pattern>标签的用法和应用场景-6ren

SVG标签的用法和应用场景

转载作者：撒哈拉更新时间：2024-06-20 19:07:21

59

4

通过使用 <pattern> 标签，可以在 SVG 图像内部定义可重复使用的任意图案。这些图案可以通过 fill 属性或 stroke 属性进行引用.

使用场景

例如我们要在 <svg> 中绘制大量的圆点点，可以通过重复使用 <circle> 标签来实现.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="2" fill="black" />
  <circle cx="30" cy="10" r="2" fill="black" />
  <circle cx="50" cy="10" r="2" fill="black" />
  <circle cx="70" cy="10" r="2" fill="black" />
  <circle cx="90" cy="10" r="2" fill="black" />

  <circle cx="10" cy="30" r="2" fill="black" />
  <circle cx="30" cy="30" r="2" fill="black" />
  <circle cx="50" cy="30" r="2" fill="black" />
  <circle cx="70" cy="30" r="2" fill="black" />
  <circle cx="90" cy="30" r="2" fill="black" />

  <circle cx="10" cy="50" r="2" fill="black" />
  <circle cx="30" cy="50" r="2" fill="black" />
  <circle cx="50" cy="50" r="2" fill="black" />
  <circle cx="70" cy="50" r="2" fill="black" />
  <circle cx="90" cy="50" r="2" fill="black" />

  <circle cx="10" cy="70" r="2" fill="black" />
  <circle cx="30" cy="70" r="2" fill="black" />
  <circle cx="50" cy="70" r="2" fill="black" />
  <circle cx="70" cy="70" r="2" fill="black" />
  <circle cx="90" cy="70" r="2" fill="black" />

  <circle cx="10" cy="90" r="2" fill="black" />
  <circle cx="30" cy="90" r="2" fill="black" />
  <circle cx="50" cy="90" r="2" fill="black" />
  <circle cx="70" cy="90" r="2" fill="black" />
  <circle cx="90" cy="90" r="2" fill="black" />
</svg>

这种方法不好的地方在于，需要为每个点都创建一个 <circle> 标签，它们除了坐标不一致之外，其它属性都是相同的，大量代码都是冗余的.

这种情况正好就是 <pattern> 标签能够大显身手的地方.

使用方法

使用 <pattern> 标签的基本步骤如下:

在 <defs> 标签内定义 <pattern>。
通过元素的 stroke 或 fill 属性引用定义好的图案。

定义 <pattern> 最初看起来可能有些复杂，但实际上它仅仅是绘制一些形状或路径而已。你可以把它想象成一个可从外部重复引用的 <svg> 标签.

<pattern> 可使用的一些属性

viewBox: 用数值列表指定图案视口边界，默认为 none。
x: 以长度或百分比指定图案的X坐标，默认为 0。
width: 指定图案宽度，默认为 0。
height: 指定图案高度，默认为 0。
href: 要重用现有图案时，指定 id，默认为 none。
patternContentUnits: 指定图案坐标系统，可选值为 userSpaceOnUse（SVG坐标）或objectBoundingBox（相对于形状），默认为 userSpaceOnUse。若设置了 viewBox，此属性无效。
patternTransform: 如需对图案应用变换（如旋转 rotate(45) ），在此指定，默认为 none。
patternUnits: 指定 x、y、width、height 值所使用的坐标单位，可选 userSpaceOnUse 或 objectBoundingBox，默认为 objectBoundingBox。
preserveAspectRatio: 定义当图案应用于具有不同长宽比的图形时的处理方式，可选值包括 none、xMinYMin、xMidYMin、xMaxYMin、xMinYMid、xMidYMid、xMaxYMid、xMinYMax、xMidYMax、xMaxYMax 等，并可附加 meet（保持比例填充）或 slice（可截断），默认为 xMidYMid meet。

我们再以上面的点状图案为例，使用 <pattern> 标签重新实现一次，代码如下:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="dotPattern" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="2" fill="black" />
    </pattern>
  </defs>
  <rect width="100" height="100" fill="url(#dotPattern)" />
</svg>

此时代码看起来比上面那一版要简洁多了，尽管坐标计算稍微复杂一些，但这种方式的可读性比上一版要好很多.

案例演示

SVG <pattern> 案例 - 创建可重复使用图案，在线预览。

参考资料

Patterns - SVG：可缩放矢量图形 | MDN 。

<pattern> – SVG: Scalable Vector Graphics | MDN 。

最后此篇关于SVG标签的用法和应用场景的文章就讲到这里了,如果你想了解更多关于SVG标签的用法和应用场景的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

59

4

0

文章推荐： MoneyPrinterPlus:AI自动短视频生成工具-阿里云配置详解

文章推荐：如何应用matrix3d映射变幻

文章推荐：以沙箱的方式运行容器:安全容器KataContainers

文章推荐： Java跳动爱心代码

spring - / 和 /* 的区别
这个问题在这里已经有了答案: Difference between / and /* in servlet mapping url pattern (5 个回答) 4年前关闭。 web.xml 中的/
scala - 与连词的模式匹配(Pattern AND Pattern)
Scala 具有支持模式匹配中析取的语言功能(“模式替代”): x match { case _: String | _: Int => case _ => } 但是，如果审查满足 P
design-patterns - 我们可以在运行时为 Scala 类分配/更改特征吗？如何 - 任何示例代码？ Like Strategy Pattern (Gang of four Design Pattern)
解释我的问题: 类别:玩具特质 1:说话像男性特质2:说话像女性我能否在运行时更改 Toy 的行为(特征)，以便有时同一个对象说话像男性，有时同一个对象说话像女性？我想在运行时改变说话行为。
design-patterns - 鼠标适配器 : which pattern does it use?
我已经能够找到很好的资源，这些资源告诉我 Java API 中的 MouseAdapter 没有使用适配器模式。问题是:MouseAdapter 是否实现了某种模式？我知道它的作用:它为 Mouse
pattern-recognition - 如何: Pattern Recognition
我有兴趣了解有关模式识别的更多信息。我知道这是一个广泛的领域，所以我将列出一些我想学习处理的特定类型的问题: 在看似随机的字节集中查找模式。识别图像中的已知形状(例如圆形和正方形)。注意给定位置流
design-patterns - "Reactor Pattern"及其应用的简单解释
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
regex - ~/pattern/和 ~ "pattern"之间的区别？
所以，问题很简单:在 awk 中，if (var ~/pattern/) 是否与 if (var ~ "pattern") 相同？我已经对 csv 进行了一些基本测试，两者似乎都产生了相同的结果..
Java字符串标记化: Split on pattern and retain pattern
我的问题是 this 的 Scala (Java) 变体Python 上的查询。特别是，我有一个字符串 val myStr = "Shall we meet at, let's say, 8:45
java - 为什么 Pattern.pattern() 不嵌入标志？
我最近一直在研究正则表达式并注意到了这一点。 Pattern pNoEmbed = Pattern.compile("[ a-z]+", Pattern.CASE_INSENSITIVE); Patt
c++ - 相互友情指点 : What Pattern or anti-pattern is this?
在研究大型应用程序的 C++ 源代码时，我发现了这种模式(该示例的语法可能很粗略，但基本细节都在那里): class A : X friend B; B *parent; ...
design-patterns - 现实世界中使用 "Mediator pattern"的示例是什么？
有人可以举一个“中介者模式”在现实世界中有用的用例吗？最佳答案 Mediator是一种添加第三方对象以控制一组(2 个或更多)对象之间交互的方法。您能找到的最简单的示例是 Chat Room例如，
pattern-matching - OCaml 模式匹配变体中的 "Pattern expected"
尝试编译以下代码片段时: type 'a frame = Empty | Frame of string * 'a * 'a frame let rec searchFrame f s = match
java - / 供过滤器使用
目标我的目标是获得一个 servlet 过滤器来处理对主页的请求，然后再将它们转发到 index.jsp。问题我无法让过滤器接收来自“/”的请求。它的 URL 模式是 / 相反，对该模式的请求最
java - /* 错误
这个问题已经有答案了: Difference between / and /* in servlet mapping url pattern (5 个回答) 已关闭 6 年前。我已经设置了一个具有此
javascript - 斯托扬·斯特凡诺夫 : JavaScript Patterns - "The Default Pattern"
第 6 章(代码重用模式)中有以下示例: // the parent constructor function Parent(name) { this.name = name || 'Adam
java - pattern() 与 Pattern 类中的 toString()
Pattern类中的pattern()方法和toString()方法有什么区别？文档说: public String pattern() Returns the regular expression
javascript - ng-pattern 不显示 $error.pattern
我有脚本 here并且 ng-pattern 工作正常，因为 scope.subnet 仅在输入匹配模式后才显示在输出中。但是如果 ng-pattern 不匹配，ng-show 不会显示任何错误
java - pattern.matcher() 和 pattern.matches()
我想知道为什么当提供相同的正则表达式和相同的字符串时，java regex pattern.matcher() 和 pattern.matches() 的结果会不同 String str = "hel
design-patterns - 定义: Small Boy With A Pattern Syndrome
This SO answer引用“患有模式综合症的小男孩”。虽然我可以通过上下文推断出一些含义，但我并不完全理解。 “有模式综合症的小男孩”的良好定义是什么？最佳答案它只是意味着寻找将模式注入(i
design-patterns - 微服务 : aggregate data : is there some good patterns?
我有以下微服务架构的用例。我的问题是，在当前情况下，我有 3 个微服务和一个 APIGateway。最后，网关必须在聚合(组合)来自 3 个服务的数据之前进行大量查询。因为这 3 个微服务只提供基

首页

博学

6Ren·AI