【HTML5-基础-SVG实践】
关于svg
HTML页面常用加载svg图片方式:
- HTML元素
// data 和 type 至少指定一项
<object data = './public/icon.svg' width='20' height='20' name='svg' type='image/svg+xml' usemap="#nameOfMap" ></object>
- HTML元素(不推荐)
- iframe
<iframe src="./location-1.svg" frameborder="0" style="background-color: #666;"></iframe>
- HTML元素
- CSS[background-image]属性
react-svg
在react项目中使用svg,建议使用react-svg.
react-svg即一个封装后的React组件。它的目的在于利用SVGinjector把SVG添加到DOM中。
import React from 'react';
import ReactDOM from 'react-dom';
import ReactSVG from 'react-svg';
ReactDOM.render(
<ReactSVG
path="atomic.svg"
callback={svg => console.log(svg)}
className="class-name"
wrapperClassName="wrapper-class-name"
/>,
document.querySelector('.Root')
);
在实际开发中,使用上面的方法插入svg同样繁琐。利用react-svg-loader插件可以简化上述过程:
// 不使用webpack
import Image1 from 'react-svg-loader!./image1.svg';
// 使用webpack配置了react-svg-loader
import Image2 from './image1.svg';
// 像普通react组件那样使用它, react-svg-loader会在自动将它替换为DOM
<Image1 width={50} height={50}/>
<Image2 width={50} height={50}/>
webpack中设置:
{
test: /\.svg$/,
use: [
{loader: 'babel-loader'}
{
loader: 'react-svg-loader'
}
]
}
react-svg-loader内部流程
输入svg -> 使用SVGO进行SVG优化 -> 编译转换
因此webpack中可以配置SVGO参数
{
test: /\.svg$/,
use: [
{loader: 'babel-loader'}
{
loader: 'react-svg-loader',
options:{
svgo: [
{
removeTitle: false
}
]
}
}
]
}
其他
【HTML5-基础-SVG实践】的更多相关文章
- html5 基础入门
html5 基础入门 前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...
- HTML5 基础测试题
HTML5 基础测试题 1.HTML5 之前的 HTML 版本是什么?() A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2.HTML5 的正确 d ...
- 突袭HTML5之SVG 2D入门1 - SVG综述////////////////zzzzzzzz
以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...
- HTML5实战——svg学习
百度百科: SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C制定的一种新的二维矢量图形格式,也 ...
- html5基础的常用的技巧
html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...
- HTML5基础知识及相关笔记
HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...
- MSF基础攻击实践报告
MSF基础攻击实践 MSF的六个模块:exploit,encoder,payload,aux,post,nops exploit——渗透攻击模块 测试者利用它来攻击一个系统,程序,或服务,以获得开发者 ...
- HTML5基础——笔记
HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- 原创 HTML5:JS操作SVG实践体会
在工业信息化系统里,常常需要动态呈现系统的数据在一张示意图里,用于展现系统状态,分析结果等.这样用JavaScript操作svg 元素就有现实意义.本人近期做了一些实践,现分享一下. 需求: 你下面这 ...
- HTML5学习--SVG全攻略(基础篇)
明天高级篇 一.什么是SVG? SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义用于网络的基于矢量的图形,使用 XML 格式定义图形.SVG 图像在放大或 ...
随机推荐
- drupal7 STMP邮件模块配置
drupal7.54 STMP version = "7.x-1.6" 配置: 注意:上面的“用户名”需要和“站点信息”页面的电子邮件地址保持一致,邮件发送才能成功 ---- ...
- git基础命令。
创建一个新的本地仓库 git init 克隆远程服务器 git clone URL 打开一个文件夹 cd 添加文件 git add . 本地提交更改 git commit -m ...
- JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- MySQL数据库(8)----表的创建、删除、索引和更改
MySQL允许使用 CREATE TABLE 语句和 DROP TABLE 语句来创建.删除表,使用 ALTER TABLE 语句更改其结构.CREATE INDEX 语句和 DROP INDEX 语 ...
- Ubuntu 17.04 upgrade to 17.10
Just try sudo do-release-upgrade if you get this An upgrade from 'zesty' to 'bionic' is not support ...
- Socket(套接字) IP TCP UDP HTTP
Socket(套接字) 阮老师的微博 (转)什么是套接字(Socket)? 应用层通过传输层进行数据通信时,TCP和UDP会遇到同时为多个应用程序进程提供并发服务的问题.多个TCP连接或多个应用程序进 ...
- Springmvc和Mybatis中常用的注解
使用注解来构造IoC容器 用注解来向Spring容器注册Bean.需要在applicationContext.xml中注册<context:component-scan base-package ...
- MooseFS安装部署
环境信息 Master服务器 dev04 chunkserver服务器 dev02.dev03.dev04 metalogger服务器 dev03 mount客户端 dev01.dev02 安装前下载 ...
- 软工读书笔记 week3 (《黑客与画家》上)
一.何谓黑客? 黑客,在我们大多数普通人眼里,就是入侵计算机的人,通常还与干坏事挂钩.而书中告诉我们,这 并不是它的真正含义.而要想理解这本书,就要首先理解什么是黑客. 黑客这个词最初起源时,完全是一 ...
- P2DR模型
P2DR模型是可适应网络安全理论或称为动态信息安全理论的主要模型.P2DR模型是TCSEC模型的发展,也是目前被普遍采用的安全模型.P2DR模型包含四个主要部分:Policy(安全策略).Protec ...