首页 > 其他分享 >SVG <pattern> 标签的用法和应用场景

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

时间:2024-06-20 17:31:10浏览次数:24  
标签:SVG 指定 默认 图案 坐标 标签 pattern

通过使用 <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> 标签的基本步骤如下:

  1. <defs> 标签内定义 <pattern>
  2. 通过元素的 strokefill 属性引用定义好的图案。

定义 <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: 指定 xywidthheight 值所使用的坐标单位,可选 userSpaceOnUseobjectBoundingBox,默认为 objectBoundingBox
  • preserveAspectRatio: 定义当图案应用于具有不同长宽比的图形时的处理方式,可选值包括 nonexMinYMinxMidYMinxMaxYMinxMinYMidxMidYMidxMaxYMidxMinYMaxxMidYMaxxMaxYMax 等,并可附加 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,指定,默认,图案,坐标,标签,pattern
From: https://blog.csdn.net/henry47/article/details/139838444

相关文章

  • SVG <pattern> 标签的用法和应用场景
    通过使用<pattern>标签,可以在SVG图像内部定义可重复使用的任意图案。这些图案可以通过fill属性或stroke属性进行引用。使用场景例如我们要在<svg>中绘制大量的圆点点,可以通过重复使用<circle>标签来实现。<svgwidth="100"height="100"xmlns="http://www.w3.org......
  • 【Android】代码中将 SVG 图像转换颜色
    要在代码中将SVG图像转换为黑色,你可以使用一个库,例如AndroidSVG或SVG-Android。以下是一个简单的示例代码,展示了如何通过代码方式将SVG图像改为黑色://导入AndroidSVG库importcom.caverock.androidsvg.SVG;importcom.caverock.androidsvg.SVGParseException;......
  • js 如何解析带有html标签的内容
    在JavaScript中解析带有HTML标签的内容,通常是为了提取信息或转换HTML结构为可操作的对象。以下几种方式可以实现:1.使用DOMParser        如果想将HTML字符串解析成DOM节点以便进一步操作(比如查询、修改等),可以使用DOMParser。这是一个非常强大的工具,特别是在处理复......
  • vue3标签模板上的ref类型注解
    子组件<scriptsetuplang="ts">import{ref,defineExpose}from'vue';constnum=ref<number>(10)defineExpose({num,//把值暴露出去,父级可以通过ref获取})</script><template><h1>我是组件</h1></template&g......
  • HTML基本标签使用【超链接标签、表格标签、表单标签、input标签】
    目录一、基本介绍1.1概念1.2HTML的核心特点二、HTML基本标签三、超链接标签四、表格标签✌`<table>`标签属性✍`<tr>`标签属性✌`<td>`和`<th>`标签属性演示注意事项五、表单标签综合应用最后一、基本介绍1.1概念HTML,全称为超文本标记语言(HyperText......
  • 由于 react native svg 图表的依赖性问题,无法在 expo 上构建我的应用程序
    我最近制作了一个应用程序,并尝试为TestFlight构建该应用程序。在我的应用程序中,我开始使用react-native-svg-charts它使用react-native-svg.这些是我的package.json中的版本:"react-native-svg":"^15.3.0"、"react-native-svg-charts":"^5.4.0"、"react-n......
  • 【Git入门和实战】第2课:git中的专有名词和概念解释:仓库、工作目录、暂存区、远程仓库
    本文是git入门到实战系列文章的第2课,主要讲解git中的专有名词和概念,主要有仓库(repository)、工作目录(WorkingDirectory)、暂存区(Stage/Index)、远程仓库(remote)、、提交(commit)、HEAD指针、文件状态、分支(branch)、合并(merge)、标签(tag)、引用(ref)。(文末附练习题,......
  • vue 使用vite-plugin-svg-icons
    安装npminstallvite-plugin-svg-icons--savenpminstallfast-glob--save在vite.config.js配置 import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{createSvgIconsPlugin}from'vite-plugin-svg-icons......
  • Mybatis框架中结果映射resultMap标签方法属性收录
    Mybatis框架中结果映射resultMap标签收录在MyBatis框架中,resultMap是一种强大的机制,用于将数据库结果集映射到Java对象上。它允许你定义如何将查询结果中的列映射到Java对象的属性上,尤其是当数据库表的字段名与Java对象的属性名不一致时,或者需要进行复杂的映射(如一对一、......
  • 鸿蒙开发文件管理:【@ohos.securityLabel (数据标签)】
    数据标签该模块提供文件数据安全等级的相关功能:向应用程序提供查询、设置文件数据安全等级的JS接口。 说明: 本模块首批接口从APIversion9开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。导入模块importsecurityLabelfrom'@ohos.securityLabe......