在网页中使用svg有以下三种方式

1. svg归根结底来说是一种图像格式,虽然有别于jpeg,gif,png等位图图像格式,所以在网页中能嵌入图像的地方都可以嵌入svg,例如将svg文件设置为<img>元素的src属性,或者是给任意的元素设置背景图像,或者是设置为CSS3的属性border-image。但是这种方式的缺点也很明显,就是浏览器在渲染svg图像的时候,会将svg描述的矢量图像转换成栅格图像用于显示,这就失去了svg的一部分功能,svg是文本描述的图像格式,可能会有一些引用文件,比如其他的图像文件,外部脚本或者是web字体文件,在使用这种方式渲染svg时大多数浏览器会忽略引用文件。

2. <object>元素可以将外部的文件嵌入到html中,

3. 在网页中嵌入svg,最直接的方式莫过于将svg文件的内容直接写入html文本中,这样在网页中不仅可以显示svg图像,还可以使用脚本控制,用css添加样式,可谓是最好的做法。在XHTML中添加svg时,需要在顶级<svg>元素上设置xmlns=”http://www.w3.org/2000/svg”,它会改变该元素和其所有子节点的默认命名空间,对于HTML5文件,则可以省略这一步。svg在网页中默认以内联元素的方式显示。

1. svg学习笔记-在网页中使用svg的更多相关文章

  1. python学习笔记——提取网页中的信息正则表达式re

    被用来检索\替换那些符合某个模式(规则)的文本,对于文本过滤或规则匹配,最强大的就是正则表达式,是python爬虫里必不可少的神兵利器. 1 正则表达式re基本规则 [0-9] 任意一个数字,等价\d ...

  2. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

  3. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  4. 并发编程学习笔记(4)----jdk5中提供的原子类及Lock使用及原理

    (1)jdk中原子类的使用: jdk5中提供了很多原子类,它会使变量的操作变成原子性的. 原子性:原子性指的是一个操作是不可中断的,即使是在多个线程一起操作的情况下,一个操作一旦开始,就不会被其他线程 ...

  5. [学习笔记] 在Eclipse中导入项目

    参考前文:[学习笔记] 在Eclips 中导出项目 选择已经导出的文件: 导入之后,项目结构如下: 至此,完成.

  6. CockroachDB学习笔记——[译]CockroachDB中的SQL:映射表中数据到键值存储

    CockroachDB学习笔记--[译]CockroachDB中的SQL:映射表中数据到键值存储 原文标题:SQL in CockroachDB: Mapping Table Data to Key- ...

  7. [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar中的类解压后放在运行jar中

    前文: [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar打在jar包中 使用7z打开压缩包,查看所有依赖的jar都被解压以包名及class的方式存储在了运行jar中,此时jar的 ...

  8. [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar打在jar包中

    本文需要参考前文: [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar在子目录中 上文是导出的运行的依赖jar被放在了子目录中,本文是将依赖jar放在可运行jar的本身,这样发布的 ...

  9. [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar在子目录中

    工程创建可参考前文: [学习笔记] 在Eclipse中使用Hibernate,并创建第一个工程,数据库为Oracle XE 在工程上鼠标右键: 找到java 选择 Runable JAR file N ...

随机推荐

  1. Python -- tabulate 模块,

    pip install tabulate >>> from tabulate import tabulate >>> table = [["Sun&quo ...

  2. 【Promise】Promise实现请求超时处理(基本版)

    首先是没有加入请求超时的情况: var http = require('http'); var url = require('url'); function get(addr) { return ne ...

  3. Kafka项目实战-用户日志上报实时统计之应用概述

    1.概述 本课程的视频教程地址:<Kafka实战项目之应用概述> 本课程是通过一个用户实时上报日志来展开的,通过介绍 Kafka 的业务和应用场景,并带着大家搭建本 Kafka 项目的实战 ...

  4. 第4章 Selenium2-java WebDriver API (二)

    4.8  定位一组元素 定位一组元素的方法与定位单个元素的方法类似,唯一的区别是在单词element后面多了一个s表示复数.定位一组元素一般用于以下场景: ·批量操作元素,例如勾选页面上所有的复选框. ...

  5. mysql查看表注释和字段注释的方法

    1.取字段注释 Select COLUMN_NAME 列名, DATA_TYPE 字段类型, COLUMN_COMMENT 字段注释from INFORMATION_SCHEMA.COLUMNSWhe ...

  6. pycharm专业版破解

    网上找的用license server破解的地址都不可用== 有个方法倒是靠谱的,记录一下: 1.将C:\Windows\System32\drivers\etc里面的hosts文件打开,然后在文件中 ...

  7. python 输出颜色与样式的方法

    上次遇到这个问题就想写下来,其实当时我也不怎么会,老师说这个东西不需要理解,只需要死记硬背,写的多了就记住了,所以今天搜集了几篇文章,加上自己的理解,写下了这篇python 输出颜色的样式与方法的文章 ...

  8. 【Java深入研究】4、fail-fast机制

    在JDK的Collection中我们时常会看到类似于这样的话: 例如,ArrayList: 注意,迭代器的快速失败行为无法得到保证,因为一般来说,不可能对是否出现不同步并发修改做出任何硬性保证.快速失 ...

  9. webpack4 系列教程: 前言

    1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的帮助下,开发者可以轻松地实现加密代码.多平台兼容.而最重要的是,它为前端工程化提供了最好支持.vue.react等大型 ...

  10. Linux Centos下安装jdk

    1.准备工作 https://www.cnblogs.com/dddyyy/p/9746942.html 上面这篇博客讲了如何安装linux 你想安装的jdk(对应版本的jdk) 连接Linux的软件 ...