2. SVG的使用方式

可缩放矢量图形(SVG)是一种基于XML的图像格式,用于网络上的二维图形。SVG允许图形在不同尺寸下保持高质量,这使得它非常适合响应式设计。本文将介绍SVG的几种使用方式,包括实例代码、应用场景以及各自的优缺点。

1 内联SVG

示例

<svg width="100" height="100"><!-- 画一个红色的圆 --><circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

应用场景

内联SVG适用于直接在HTML文档中嵌入简单的图形,如图标或小型插图。

优点

  • 直接控制:可以使用CSS和JavaScript直接操作SVG元素。
  • DOM访问:作为DOM的一部分,可以用DOM API来操作。

缺点

  • 代码冗长:对于复杂图形,内联SVG会使HTML文档变得非常长。
  • 性能问题:大量的SVG元素可能会影响页面性能。

2 SVG作为图像文件

示例

<img src="image.svg" alt="描述性文本">

应用场景

当SVG图形作为独立文件时,适用于需要多次重用的图形,如徽标或复杂插图。

优点

  • 缓存:浏览器可以缓存SVG文件,提高加载速度。
  • 维护:单独的文件更易于管理和更新。

缺点

  • 无法控制:不能像内联SVG那样用CSS或JavaScript直接控制。
  • 兼容性:某些旧浏览器可能不支持作为图像文件的SVG。

3 CSS背景图

示例

div {background-image: url('image.svg');
}

应用场景

作为CSS背景图,SVG适用于网页背景、按钮或其他元素的装饰。

优点

  • 灵活性:可以通过CSS控制图形的位置和大小。
  • 简洁:保持HTML结构的简洁。

缺点

  • 控制限制:不能像内联SVG那样精细控制图形的每个部分。
  • 无法交互:作为背景图,SVG不能响应用户的交互。

4 使用embed嵌入SVG

示例

<embed type="image/svg+xml" src="image.svg" width="300" height="200" />

应用场景

embed标签适用于需要在页面中嵌入外部应用或交互式程序,如SVG图形。

优点

  • 兼容性embed标签在现代浏览器中具有良好的兼容性。
  • 灵活性:可以指定SVG文件的尺寸。

缺点

  • 无DOM访问:不能像内联SVG那样通过DOM API操作SVG。
  • 安全性:某些情况下可能存在安全风险。

5 使用object嵌入SVG

示例

<object type="image/svg+xml" data="image.svg" width="300" height="200">您的浏览器不支持SVG</object>

应用场景

object标签适用于嵌入各种类型的多媒体资源,包括SVG。

优点

  • 回退内容:可以为不支持SVG的浏览器提供回退内容。
  • 文档独立性:SVG文件作为独立的文档被引用。

缺点

  • 交互限制:与embed类似,交互性不如内联SVG。
  • 复杂性:对于简单的SVG使用场景而言,可能过于复杂。

6 使用iframe嵌入SVG

示例

<iframe src="image.svg" width="300" height="200"></iframe>

应用场景

iframe标签适用于将一个独立的HTML页面嵌入到当前页面中,适用于包含SVG的页面。

优点

  • 隔离性iframe中的内容在一个独立的环境中运行,不会影响主页面。
  • 安全性:可以提供一定程度的安全隔离。

缺点

  • 性能开销iframe会创建一个额外的窗口对象,可能影响性能。
  • SEO影响:搜索引擎可能不会索引iframe中的内容。

7 使用JavaScript动态添加SVG

示例

let svgNS = "http://www.w3.org/2000/svg";
let myCircle = document.createElementNS(svgNS, "circle");
myCircle.setAttribute("cx", "50");
myCircle.setAttribute("cy", "50");
myCircle.setAttribute("r", "40");
myCircle.setAttribute("fill", "blue");
document.getElementById("mySVGContainer").appendChild(myCircle);

应用场景

动态添加SVG适用于需要在用户交互或其他运行时事件中创建或修改图形的情况。

优点

  • 动态性:可以根据用户行为或数据变化动态创建SVG。
  • 控制性:可以完全控制SVG的创建和修改过程。

缺点

  • 复杂性:需要编写额外的JavaScript代码来处理SVG。
  • 学习曲线:对于初学者来说,可能需要一定时间来掌握。

更多建议使用前三种使用方式,使用embed, iframe和object引入时,需要注意同源问题,否则无法通过js获得SVG对象元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/9167.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++(函数高级)

函数默认参数 在C中&#xff0c;函数的形参列表中&#xff0c;形参是可以有默认值的 语法&#xff1a;返回值类型 函数名 &#xff08;参数 默认值&#xff09;{} #include<iostream> using namespace std;//函数默认参数 //如果我们传入自己的数据&#xff0c;就使用自…

PDPS15---安装过程---常遇问题---分享

目录 问题1 安装失败 1.1 运行第一步出错 1.2 解决 问题2 路径错误 2.1 错误 2.2 解决 问题3 运行失败 3.1 无法找到路径 3.2 原因分析 3.3 解决 问题4 拒绝访问 4.1 出现提示 4.2 分析 4.3 解决 问题5 许可证过期 5.1 PD找不到许可证 5.2 解决 问题1 安装失败…

Joplin:自由、安全、多功能的笔记应用

什么是 Joplin&#xff1f; Joplin是一款免费、开源的笔记和待办事项应用程序&#xff0c;可以处理整理到笔记本中的大量笔记。这些笔记是可搜索的&#xff0c;可以直接从应用程序或从您自己的文本编辑器中复制、标记和修改。笔记采用Markdown 格式 功能亮点 功能丰富&#x…

从“制造”到“智造”:“灯塔”经验助力中国制造业转型升级-转载

作者&#xff1a;Karel Eloot&#xff0c;侯文皓&#xff0c;Francisco Betti&#xff0c;Enno de Boer和Yves Giraud 作为中国实体经济的主体&#xff0c;制造业是推动中国经济发展乃至全球制造业持续增长的重要引擎。站在历史与未来交汇的新起点上&#xff0c;中国制造业将背…

Leetcode 3133. Minimum Array End

Leetcode 3133. Minimum Array End 1. 解题思路2. 代码实现 题目链接&#xff1a;3133. Minimum Array End 1. 解题思路 这一题由于要求所有的array当中所有的数字的与为目标值&#xff0c;因此目标值当中的1的位必须保证所有的数均为1&#xff0c;剩下的位置只需要保证有一…

如何在onshow中让子组件重新加载

如何在onshow中让子组件重新加载 今日bug解决记录 在开发uniapp过程中&#xff0c;当从当前页面返回上一级页面时&#xff0c;页面的子组件数据没有重新加载&#xff0c;导致没有展示最新数据。 知识点&#xff1a; uniapp组件生命周期 beforeCreate&#xff1a;在应用实例…

3D模型如何实现拖拽打开?---模大狮模型网

在当今数字化时代&#xff0c;3D技术的应用已经深入到各行各业&#xff0c;为用户带来了更加丰富、生动的体验。然而&#xff0c;对于一些用户来说&#xff0c;打开和查看3D模型可能会面临一些困难&#xff0c;特别是在无法拖拽打开时。本文将为您揭示解决这一问题的方法&#…

【C】语⾔内存函数--超详解

1. memcpy 使⽤和模拟实现 void * memcpy ( void * destination, const void * source, size_t num ); 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 这个函数在遇到 \0 的时候并不会停下来。 如果source和destination有任何的重叠&am…

数据结构与算法之树和二叉树的一些概念和性质

目录 前言 一、树的定义 二、树的若干术语 1.结点的度 2.叶子 3.双亲与孩子 4.兄弟 5.祖先 6.树的度 7.结点的层次 8.树的深度 9.有序树和无序树 10.森林 三、树的逻辑结构 四、树的存储结构 1.顺序存储 2.链式存储 五、二叉树 1.定义 2.二叉树的五种状态 …

SPA模式下的多页面跳转原理及实现

jQuery Mobile在SPA模式下的多页面跳转原理及实现案例 文章目录 jQuery Mobile在SPA模式下的多页面跳转原理及实现案例前言一、SPA的实现原理和代码分析1.实现原理说明&#xff08;1&#xff09;index.html&#xff08;2&#xff09;index.js&#xff08;3&#xff09;page2.ht…

前端css中线性渐变(linear-gradient)的使用

前端css中线性渐变 一、前言二、关键词句三、主要内容说明&#xff08;一&#xff09;、线性渐变方向1.角度调整方向2.负值角度&#xff0c;源码13.源码1运行效果4.关键字调整方向5.to right向右线性渐变&#xff0c;源码26.源码2运行效果 &#xff08;二&#xff09;、线性渐变…

今日总结2024/5/9

今日复习了朴素LCS,学习了LCS优化&#xff0c;以及LCIS 最长上升公共子序列 P1439 最长公共子序列 题目描述 给出 1,2,…,&#x1d45b; 的两个排列 &#x1d443;1​ 和 &#x1d443;2​ &#xff0c;求它们的最长公共子序列。 输入格式 第一行是一个数 &#x1d45b;。…

初识C语言——第十六天

C语言中的语句结构类型:顺序/选择/循环 分支语句 if else switch 循环语句 while for do whlie goto语句 代码练习:找两个整数的最大公约数和最小公倍数 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h>//int main() //{ // int age 60; // if (ag…

【ARM64 常见汇编指令学习 14.1 -- ARM 汇编 .align 和 .section】

文章目录 ARM 汇编 .align 和 .section.align.section示例 ARM 汇编 .align 和 .section 在ARM64&#xff08;或称为AArch64&#xff09;汇编语言中&#xff0c;.align 和 .section 是两个常用的指令&#xff0c;它们在代码中扮演着重要的角色&#xff0c;尤其是在控制内存对齐…

YOLOv5-7.0改进(三)添加损失函数EIoU、AlphaIoU、SIoU、WIoU、MPDIoU、NWD

前言 损失函数的改进一直是涨点的重要技巧&#xff0c;本篇博客将使用六个不同损失函数对算法进行改进&#xff0c;并绘制出改进结果对比图~ 往期回顾 YOLOv5-7.0改进&#xff08;一&#xff09;MobileNetv3替换主干网络 YOLOv5-7.0改进&#xff08;二&#xff09;BiFPN替换…

基士得耶CP 6303c速印机不制版故障检修

故障&#xff1a;基士得耶CP 6303c经常提示版纸卡纸&#xff0c;重设版纸 版纸还没下滚筒&#xff0c;卡在版纸仓里面,手动滚动裁纸刀可以解决&#xff0c;但第二天又是这个毛病&#xff1b; 版纸定位传感器的灵敏度调节一下,然后给机器全面做个清洁大保养&#xff0c;尤其是传…

网工内推 | 技术支持工程师,最高15k,加班有补贴

01 星网信通 招聘岗位&#xff1a;售前技术支持 职责描述&#xff1a; 1、售前技术支持&#xff1a;技术交流、产品选型报价、方案制作等工作&#xff1b; 2、招投标支持&#xff1a;项目招标参数撰写、标书质疑、应标文件技术部分撰写及资质文件归纳准备、现场讲标及技术澄清…

vue路由知识补充(updating···)

1路由守卫中的next() next()方法表示放行&#xff0c;如果不执行此方法路由不会跳转&#xff0c;此方法可以接收一个参数 字符串路径&#xff1a;如果传递一个字符串路径&#xff0c;那么路由会重定向到该路径。 next(/home); 路由对象&#xff1a;如果传递一个路由对象&…

leetcode尊享面试——二叉树(python)

250.统计同值子树 使用dfs深度搜索&#xff0c;同值子树&#xff0c;要满足三个条件&#xff1a; 对于当前节点node&#xff0c;他的左子树血脉纯净&#xff08;为同值子树&#xff09;&#xff0c;右子树血脉纯净&#xff08;为同值子树&#xff09;&#xff0c;node的值等于…

MySQL-数据结构(索引)选择的合理性

MySQL衡量查询效率的标准就是磁盘IO次数&#xff08;对索引的使用效率至关重要&#xff09;加速查找速度的数据结构&#xff0c;基本分为以下两类&#xff1a; 树&#xff0c;增删改查的平均时间复杂度都是O(log2N)哈希&#xff08;hash&#xff09;&#xff0c;增删改查的平均…