SVG在前端中的常见应用

这篇具有很好参考价值的文章主要介绍了SVG在前端中的常见应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


只是一些常用的应用,但足以入门。

一、svg标签

1. svg

  • svg标签相当于画布。
  • 可以在标签中定义宽和高
<svg width="100" height="100"></svg>

2. g

  • g 标签可以对svg元素进行分组,分组后可以统一配置属性。
<svg>
	<g>...</g>
</svg>

二、描边属性

  • stroke:笔画颜色属性,值为颜色值
  • strike-width:笔画宽度属性,值为数值
  • stroke-linecap:笔画笔帽属性
    • butt:默认值,没有线帽。
    • round:圆形线帽。
    • square:方形线帽。
  • stroke-dasharray:笔画虚线属性,值为数组序列,至少2个值。
<path d="M175 200 l 150 0" stroke="gray" stroke-dasharray="20,10,3,3" stroke-width="3" fill="none"></path>

svg 前端,前端,前端,python,开发语言

  • 所有的描边属性都可以应用于线条、文本、元素轮廓。
  • 下面会大量运用。

三、模糊和阴影效果

  • 给 svg 添加特殊效果需要添加 <filter></filter> 实现,且在 <defs></defs> (definitions)中定义。
  • filter 里面包含一个或多个效果(过滤器)滤镜。
  • filter 属性:
    • id:识别过滤器。
    • x:滤镜起始点x坐标
    • y:滤镜起始点y坐标
    • width:滤镜宽
    • height:滤镜高

1. 模糊

  • feGaussianBlue 定义高斯模糊。
  • 定义在 filter 里面。
  • feGaussianBlue 属性:
    • stdDeviation :定义模糊数量,值为数值,值越大越模糊。
<svg width="100" height="100">
    <defs>
        <filter x="0" y="0" id="f1">
            <feGaussianBlur stdDeviation="15"></feGaussianBlur>
        </filter>
    </defs>
    <rect width="90" height="90" stroke="pink" stroke-width="3" fill="skyblue" filter="url(#f1)"></rect>
</svg>

svg 前端,前端,前端,python,开发语言

2. 阴影效果

  • 阴影效果通过 feOffsetfeBlend 实现。
  • 定义在 filter 里面。
  • feOffset 定义偏移,属性:
    • dx:阴影在x轴上的偏移,值为数值。
    • dy:阴影在y轴上的偏移,值为数值。
    • in:表示阴影图像的来源。(SourceAlpha黑色阴影,SourceGraphic图像阴影)
  • feBlend在偏移图像上混合原始图像,属性:
    • in:值为SourceGraphic。
<svg width="140" height="140">
    <defs>
        <filter x="0" y="0" width="200" height="200" id="f2">
            <feOffset in="SourceAlpha" dx="0" dy="0"/>
            <feGaussianBlur stdDeviation="5" />
            <feBlend in="SourceGraphic"/>
        </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"></rect>
</svg>

svg 前端,前端,前端,python,开发语言

四、线性渐变和径向渐变

1. 线性渐变

  • 线性渐变通过 <linearGradient></linearGradient> 实现,且在 <defs></defs> 中定义。
  • linearGradient属性:
    • id
    • x1:线性渐变开始位置x坐标
    • y1:线性渐变开始位置y坐标
    • x2:线性渐变结束位置x坐标
    • y2:线性渐变结束位置y坐标
  • 线性渐变可以由多个颜色组成,每个颜色用一个 <stop /> 指定。
  • stop 属性:
    • offset:开始和结束位置,值为百分比
    • stop-color:颜色。
<svg width="400" height="150">
    <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="rgb(255,255,0)" ></stop>
            <stop offset="100%" stop-color="rgb(255,0,0)" ></stop>
        </linearGradient>
    </defs>

    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad)"></ellipse>
    <text fill="white" font-size="45" x="160" y="85">SVG</text>
</svg>

svg 前端,前端,前端,python,开发语言

2. 径向渐变

  • 径向渐变通过 <radialGradient></radialGradient> 实现。
  • 属性:
    • id
    • cx, cy,r:定义最外面的圆(渐变结束圆圆心横坐标、纵坐标、半径)
    • fx,fy:定义最里面的圆(渐变起始点横坐标、纵坐标)
<svg width="400" height="150">
    <defs>
        <radialGradient id="grad" cx="30%" cy="30%" r="50%" fx="30%" fy="30%">
            <stop offset="0%" stop-color="white" ></stop>
            <stop offset="100%" stop-color="blue" ></stop>
        </radialGradient>
    </defs>

    <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad)"></ellipse>
</svg>

svg 前端,前端,前端,python,开发语言

五、绘制

1. 内置形状元素

  • 元素:矩形 rect、圆形 circle、椭圆 ellipse、线条 line、多线条 polyline、多边形 ploygon、路径 path。
  • 坐标系
    svg 前端,前端,前端,python,开发语言

2. 绘制矩形

  • 使用标签 rect。<rect />
  • 属性:
    • 宽度 width
    • 高度 height
    • 填充色 fill
    • 笔画颜色 stroke
    • 笔画宽度 stroke-width。
<svg width="400" height="400">
    <rect width="200" height="100" fill="skyblue" stroke-width="3" stroke="pink"/>
</svg>

svg 前端,前端,前端,python,开发语言

  • (接上)属性:
    • x:左边位置
    • y:顶部位置
    • fill-opacity:填充不透明度,为0-1
    • stroke-opacity:笔画不透明度。
    • opacity:整个矩形的不透明度。
<svg width="400" height="400">
    <rect x="50" y="20" width="200" height="100" fill="skyblue" stroke-width="3"
          stroke="pink" fill-opacity="0.1" stroke-opacity="0.5"/>
</svg>

svg 前端,前端,前端,python,开发语言

  • (接上)属性:
    • rx:圆角x轴方向上的半径长度。
    • ry:圆角y轴方向上的半径长度。
<svg width="400" height="400">
    <rect x="50" y="20" width="200" height="100" fill="skyblue" stroke-width="3"
          stroke="pink" fill-opacity="0.1" stroke-opacity="0.5" rx="20" ry="20"/>
</svg>

svg 前端,前端,前端,python,开发语言

3. 绘制圆形

  • 使用标签 <circle/>
  • 属性:
    • cx:圆心x轴坐标,默认0
    • cy:圆心y轴坐标,默认0
    • r:圆半径。
    • stroke、stroke-width、fill。
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="skyblue" stroke-width="3" fill="pink"/>
</svg>

svg 前端,前端,前端,python,开发语言

4. 绘制椭圆

  • 使用标签 <ellipse />
  • 属性:
    • cx、cy。
    • rx:水平半径
    • ry:垂直半径。
<svg width="500" height="140">
    <ellipse rx="100" ry="50" cx="200" cy="80" stroke-width="3" stroke="pink" fill="skyblue" />
</svg>

svg 前端,前端,前端,python,开发语言

  • 堆叠椭圆
<svg width="500" height="140">
    <ellipse rx="220" ry="30" cx="240" cy="100" fill="pink" />
    <ellipse rx="190" ry="20" cx="220" cy="70" fill="skyblue" />
    <ellipse rx="170" ry="15" cx="210" cy="45" fill="#fff2df" />
</svg>

svg 前端,前端,前端,python,开发语言

  • 空心椭圆
<svg width="500" height="100">
    <ellipse cx="240" cy="50" rx="220" ry="30" fill="pink"></ellipse>
    <ellipse cx="220" cy="50" rx="190" ry="20" fill="white"></ellipse>
</svg>

svg 前端,前端,前端,python,开发语言

5. 绘制线条

  • 使用标签 <line />
  • 属性:
    • x1:起点x坐标
    • y1:起点y坐标
    • x2:终点x坐标
    • y2:终点y坐标
<svg>
    <line x1="0" y1="0" x2="200" y2="200" stroke="pink" stroke-width="2"></line>
</svg>

svg 前端,前端,前端,python,开发语言

6. 绘制多边形

  • 使用 <polygon />
  • 用于创建一个至少三个边的图形。
  • 属性:
    • points:定义每个角的(x, y)坐标,至少三队坐标。
<svg width="500" height="300">
    <polygon points="200,20 250,190 160,210" fill="pink" stroke="skyblue" stroke-width="3"></polygon>
</svg>

svg 前端,前端,前端,python,开发语言

  • 绘制五角星
<svg width="500" height="300">
    <polygon points="100,10 40,198 198,78 10,78 160,198" fill="pink" stroke="skyblue" stroke-width="3"></polygon>
</svg>

svg 前端,前端,前端,python,开发语言

7. 绘制多线条

  • 使用<polyline />
  • 创建任何只由直线组成的形状
  • 属性:
    • points:同上
<svg width="500" height="300">
    <polyline points="100,10 40,198 198,78 10,78 160,198" fill="none" stroke="skyblue" stroke-width="3"></polyline>
</svg>

svg 前端,前端,前端,python,开发语言

8. 绘制文本

  • 使用 <text>...</text>
  • 属性
    • x:文本x坐标
    • y:文本y坐标
    • font-size:文本大小
    • text-anchor:对齐方式(start | middle | end)
    • stroke、stroke-width、fill
<svg width="500" height="300">
    <text x="0" y="200" font-size="30" text-anchor="start" fill="none" stroke="red" stroke-width="1">家人们,谁懂啊</text>
</svg>

svg 前端,前端,前端,python,开发语言

  • (接上)属性:
    • transform
      • rotate(旋转角度 旋转中心x, 旋转中心y)。默认(x, y)为(0, 0)。
<svg width="500" height="300">
    <text x="10" y="50" font-size="30" text-anchor="start" fill="none" stroke="red" stroke-width="1" transform="rotate(30 20,40)">家人们,谁懂啊</text>
</svg>

svg 前端,前端,前端,python,开发语言

  • text 元素可以包裹多个 tspan,每个tspan可以包含不同的格式和位置。
  • tspan属性:
    • x、y
<svg width="500" height="300">
    <text x="10" y="20" fill="red">
        Several lines
        <tspan x="10" y="45">First Line</tspan>
        <tspan x="10" y="70">Second Line</tspan>
    </text>
</svg>

svg 前端,前端,前端,python,开发语言

  • text标签可以添加链接。使用a包裹起来。要添加文本需要给svg添加xmlns:link属性,属性值固定为w3的地址。
  • a 属性:
    • xlink:href:链接地址
    • target:跳转方式
<svg width="200" height="30" xmlns:link="http://www.w3.org/1999/xhtml">
    <a xlink:href="https://www.baidu.com" target="_blank">
        <text x="10" y="15" fill="red">百度</text>
    </a>
</svg>

svg 前端,前端,前端,python,开发语言

9. 绘制路径

  • 使用 <path />
  • 可以绘制任意形状的图形
  • 属性:
    • d:draw,定义绘制路径的命令。命令大写表示绝对定位,小写表示相对定位。
      • 命令 M/m:moveto缩写,定义起点坐标(x, y)
      • 命令 L/l:lineto缩写,绘制一条线。
      • 命令 q:quadraticBezierCurve缩写,绘制二次贝塞尔曲线。定义控制点和终点坐标。
  • 绘制二次贝塞尔。
<svg width="450" height="400">
    <path d="M100 350 l 150 -300" stroke="red" stroke-width="3" fill="none"></path>
    <path d="M250 50 l 150 300" stroke="red" stroke-width="3" fill="none"></path>
    <path d="M175 200 l 150 0" stroke="green" stroke-width="3" fill="none"></path>
    <path d="M100 350 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none"></path>

    <g fill="blue">
        <circle r="3" cx="100" cy="350"></circle>
        <circle r="3" cx="250" cy="50"></circle>
        <circle r="3" cx="400" cy="350"></circle>
    </g>
    <g font-size="30" fill="black" text-anchor="middle">
        <text x="100" y="350" dx="-35">A</text>
        <text x="250" y="50" dx="-10">B</text>
        <text x="400" y="350" dx="35">C</text>
    </g>
</svg>

svg 前端,前端,前端,python,开发语言文章来源地址https://www.toymoban.com/news/detail-743024.html

到了这里,关于SVG在前端中的常见应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 浅谈两种前端截图方式:Canvas截图 vs SVG截图

    如今很多网站都引入 截图功能 ,可用于 问题反馈 、 内容分享 等实用需求,而前端截图也不知不觉成为了首选。今天为大家推荐两种前端截图方式,虽然有些局限,但是也能应付大部分项目需求。 Canvas截图 : html2canvas SVG截图 : rasterizehtml 首先来谈下两种前端截图方式的原

    2023年04月17日
    浏览(49)
  • SVG 在前端的7种使用方法,你还知道哪几种?

    点赞 + 关注 + 收藏 = 学会了 技术一直在演变,在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。 所以我打算把我知道的 7种 SVG 的使用方法列举出来,有备无患~ 如果你还知道其他方法,可以在评论区补充~ ```svg ``` xml 是浏览器能读取的格式,但如果希望 sv

    2024年02月06日
    浏览(51)
  • OpenHarmony UI开发-ohos-svg

    ohos-svg是一个SVG图片的解析器和渲染器,解析SVG图片并渲染到页面上。它支持大部分 SVG 1.1 规范,包括基本形状、路径、文本、样式和渐变,它能够渲染大多数标准的 SVG 图像。ohos-svg的优点是性能好、内存占用低。 SVG图片解析并绘制: OpenHarmony ohpm 环境配置等更多内容,请参考

    2024年04月23日
    浏览(96)
  • 学习笔记——SVG.js中的use和marker元素的相关方法

    Use() use() use元素只是模拟另一个现有元素。主元素上的任何更改都将反映在所有使用实例上。use()的用法非常简单: 在上述示例的情况下,svg绘图中将显示两个矩形,即原始矩形和使用实例矩形。在某些情况下,可能需要隐藏原始元素。最好的方法是在defs节点中创建原始

    2024年02月05日
    浏览(38)
  • 【脚本工具】SVG路径中的A指令转DXF的圆弧和椭圆弧 & C++代码实现

    目前Svg的Arc的参数字符串如下:其中,A (绝对) a (相对) 除了 A(a) 表示标识为圆弧之外,其余参数说明如下: 参数 说明 符号 rx 椭圆半长轴 a a a ry 椭圆半短轴 b b b x-axis-rotation 椭圆相对于坐标系的旋转角度,角度数而非弧度数 α alpha α large-arc-flag 是否优(大)弧:0否,1是 f l

    2024年02月06日
    浏览(42)
  • 【React】React18+Typescript+craco配置最小化批量引入Svg并应用的组件

    无论是哪种 Web UI 框架都不可避免的要与 Svg 打交道,那么批量引入才更方便管理 Svg 。 https://ryanhutzley.medium.com/dynamic-svg-imports-in-create-react-app-d6d411f6d6c6 https://github.com/airbnb/babel-plugin-inline-react-svg/issues/51 https://blog.shianqi.com/2017/12/13/Webpack/SVG-sprite/ https://pganalyze.com/blog/building-svg

    2024年04月10日
    浏览(46)
  • SVG图标,SVG symbols,SVG use标签

    项目中图标的使用,趋势是使用svg作图标的,优点如下 兼容现有图片能力前提还支持矢量 可读性好,有利于SEO与无障碍 在性能和维护性方面也比iconfont要强很多 怎么在项目中优雅的使用svg图标,下面我们将采用类似雪碧图的做法 1、普通的使用 普通的使用遇到以下的问题:

    2024年02月15日
    浏览(56)
  • 什么是SVG?——SVG快速入门

    最近在学习一个前端数据可视化D3.js,它的图表绘制是基于SVG的,作为一个小菜鸡,我并不知道什么是SVG,于是我决定把D3.js放一放,先学一下SVG。 那么什么是SVG呢?百度百科上是这么介绍的:“SVG是一种图形文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢

    2024年02月16日
    浏览(44)
  • Windows SVG预览工具(SVG Explorer Extension)

    Windows系统不支持在文件夹下直接预览svg图片,需要使用SVG扩展插件解决。 SVG Viewer Extension for Windows Explorer:它是一款功能实用的SVG图片格式本地预览工具,有了它即可轻松的进行本地文件夹中查看和浏览SVG格式资源文件 Github 地址 https://github.com/tibold/svg-explorer-extension 下载地

    2024年02月16日
    浏览(36)
  • vue中写svg组件svg图片加载不出来

    结构 首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader package.json src/icons/index.js src/components/SvgIcon/index.vue main.js vue.config.js

    2024年02月15日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包