svg用作背景图

2024-06-20 02:48
文章标签 svg 背景图 用作

本文主要是介绍svg用作背景图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

svg用做背景图的几种方式

1. 直接使用

background: url('data:image/svg xml;charset=utf-8,<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><g> <rect stroke="#000" transform="rotate(44.6804313659668 4.999999999999999,5.000000000000001)" height="6" width="6" y="2" x="2" stroke-width="0" fill="' $mainColor '"/></g></svg>') no-repeat 50% 50% / 100% 100%;

2. 转为base64后使用

background-image: url('data:image/svg xml;charset=utf-8,<svg width="41pt" height="44pt" viewBox="0 0 41 44" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="#c01a3aff"><path fill="#c01a3a" opacity="1.00" d=" M 19.37 0.00 L 21.38 0.00 C 25.49 2.03 29.46 4.34 33.44 6.61 C 34.78 7.49 36.56 8.41 36.65 10.24 C 37.03 14.14 36.80 18.08 36.85 22.00 C 36.75 24.09 37.10 26.83 34.91 28.00 C 30.95 30.47 26.83 32.72 22.65 34.81 C 19.78 36.46 16.95 33.99 14.45 32.76 C 11.20 30.65 7.30 29.35 4.62 26.48 C 3.55 22.79 4.20 18.84 4.02 15.04 C 4.20 12.40 3.41 8.79 6.28 7.30 C 10.52 4.66 14.93 2.29 19.37 0.00 M 7.12 10.18 C 7.02 15.14 7.07 20.09 7.07 25.05 C 11.59 27.64 16.05 30.36 20.76 32.60 C 24.97 29.86 29.84 28.10 33.75 24.95 C 33.92 20.09 34.14 15.17 33.61 10.34 C 29.27 7.69 24.91 4.86 20.18 3.00 C 15.69 5.12 11.50 7.83 7.12 10.18 Z" /><path fill="#c01a3a" opacity="1.00" d=" M 12.03 15.90 C 11.49 13.85 13.99 12.40 15.68 13.39 C 17.71 15.45 19.11 18.02 20.82 20.34 C 22.60 17.93 24.10 15.26 26.30 13.18 C 28.29 12.15 31.06 14.60 29.62 16.57 C 27.51 19.80 25.26 22.95 22.87 25.97 C 22.05 27.37 19.80 27.44 18.92 26.05 C 16.46 22.79 14.04 19.46 12.03 15.90 Z" /><path fill="#c01a3a" opacity="1.00" d=" M 0.00 36.60 C 1.80 34.11 2.80 29.97 6.00 29.14 C 9.77 30.69 13.50 32.65 16.66 35.26 C 16.70 38.54 13.77 41.19 12.24 44.00 L 10.30 44.00 C 8.99 42.59 7.80 41.09 6.60 39.59 C 4.39 39.29 2.19 38.96 0.00 38.54 L 0.00 36.60 M 3.72 36.17 C 6.94 35.81 9.30 37.50 11.06 40.01 C 11.96 38.90 12.75 37.71 13.54 36.53 C 11.08 35.10 8.61 33.72 6.12 32.35 C 5.32 33.63 4.53 34.90 3.72 36.17 Z" /><path fill="#c01a3a" opacity="1.00" d=" M 24.15 35.32 C 27.64 32.61 31.58 30.04 35.89 28.94 C 38.04 31.12 39.52 33.85 41.00 36.51 L 41.00 38.46 C 38.80 38.89 36.59 39.21 34.37 39.49 C 33.16 41.03 31.94 42.56 30.61 44.00 L 28.86 44.00 C 27.15 41.22 24.72 38.63 24.15 35.32 M 27.52 36.36 C 28.25 37.56 28.98 38.76 29.77 39.92 C 31.68 37.57 34.00 35.66 37.26 36.08 C 36.47 34.81 35.68 33.54 34.90 32.26 C 32.43 33.61 29.97 34.98 27.52 36.36 Z" /></g></svg>');

3. 外置引用

background-image: url(test.svg);

 

这篇关于svg用作背景图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076889

相关文章

(4)SVG-path中的椭圆弧A(绝对)或a(相对)

1、概念 表示经过起始点(即上一条命令的结束点),到结束点之间画一段椭圆弧 2、7个参数 rx,ry,x-axis-rotation,large-arc-flag,sweep-flag,x,y (1)和(2)rx,ry rx:椭圆的x轴半径(即水平半径) ry:椭圆的y轴半径(即垂直半径) 这两个参数好理解,就是椭圆的两条对称轴半径,相等即为圆 也可以写比例,写比例时默认用符合条件

svg无功补偿装置脉冲封锁怎么解除

SVG(Static Var Generator,静态无功发生器)脉冲封锁是一种保护机制,用于防止装置在异常情况下继续运行,从而避免对电力系统造成进一步的损害。如果SVG进入脉冲封锁状态,通常需要执行特定的步骤来解除封锁并恢复正常运行。以下是解除SVG脉冲封锁的一般步骤: 1. 检查故障原因 故障诊断:首先,查看SVG的故障记录或报警信息,确定导致脉冲封锁的具体原因。常见的原因包括过电流、过电

svg/webvowl 流程图创建

项目链接:https://code.csdn.net/u013372487/webvowl/tree/master

wsksvg - 支持SVG、JPEG、GIF、PNG、WebP格式图片的优化

前言 上一篇文章介绍了 wsksvg 插件的开发思路和灵感,而本篇则详细阐述了 wsksvg 扩展功能,以及技术的介绍。通过 wsksvg 插件,开发者可以高效地优化 PNG、JPG、JPEG、WEBP 和 GIF 图像,同时对 SVG 文件进行深入处理,包括优化、生成 Vue 和 React 组件以及转换为 Base64 编码格式。这些功能不仅简化了图像管理流程,也提升了应用的性能和用户体验。

SVG精髓-svg开发指南

SVG精髓 目录 文章目录 前言推荐阅读1. 入门1. 图形系统1. 栅格系统2. 矢量图形 2. `SVG`作用1. 文档结构2. `circle`3. 指定样式 - `fill, stroke`4. 线 - `line`5. 变换坐标系统 - `use, transform, scale`6. 折线 - `polyline`7. `path`8. `text` 2. 网页中使用`SVG

推荐适合中秋的SVG模版(第III期)

宝藏模版 往期推荐(点击阅读): 趣味效果|高大上|可爱风|年终总结I|年终总结II|循环特效|情人节I|情人节II|妇女节|儿童节I|儿童节II|儿童节III|618I|618II|父亲节|丝滑动画|端午节I|端午节II|滑动妙用|图片轮播I|图片轮播II|又红又专|中秋节I|中秋节II|双十一I|双十一II|世界杯|圣诞节|新年|兔年春节|元宵节|愚人节|杂志范儿|520/521I|520

JPG转SVG,分享便捷的转换方法

JPG转SVG,JPG格式是一种常用的位图格式,适用于照片和复杂图像,而SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,适用于标志、图标和图形设计。相比于位图,矢量图形具有无限缩放而不失真的优点,因此在许多应用场景中更为合适。为了帮助你轻松完成这一任务,小编将为你介绍四种便捷的将JPG转换为SVG的方法。 一、使用迅捷图片转换器 迅捷图片转换器是一

国密算法 SM2 SM3 SM4分别用作什么

非对称加密SM2(可选支持国内SM9)算法实现数据的签名、验签和加解密对称密钥, SM3密码杂凑算法实现数据摘要的生成, 对称密钥SM4加密算法实现对数据内容的加密。

vite-plugin-svg-icons 用法

vite-plugin-svg-icons 是一个 Vite 插件,用于将本地 SVG 文件转换为可直接在 Vue 组件中使用的图标。这个插件能够自动扫描指定目录下的 SVG 文件,并将其注册为 Vue 组件,从而简化了在 Vue 项目中使用 SVG 图标的过程。 1. 安装插件 首先,你需要在项目中安装 vite-plugin-svg-icons 以及相关依赖。 npm install v

Android中svg矢量图和动画的使用

新手Android SVG矢量图动画进阶 Android中svg实现的svg动画效果(超简单,在Android中除svg路径动画外,svg已经兼容到3.0以下,源代码已上传github) 什么是SVG svg概念 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG