svg all in one
svg all in one
show svg in html methods
https://vecta.io/blog/best-way-to-embed-svg
https://css-tricks.com/using-svg/
https://www.sitepoint.com/add-svg-to-web-page/
svg polygon to path
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-01-07
*
* @description
* @augments
* @example
* @link
*
*/
const log = console.log;
function convertPolyToPath1(poly){
var path = document.createElementNS(poly.ownerSVGElement.namespaceURI,'path');
var points = poly.getAttribute('points').split(/\s+|,/);
let x0 = points.shift(),
y0 = points.shift();
var pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
if (poly.tagName=='polygon') pathdata+='z';
path.setAttribute('d',pathdata);
return path;
}
function convertPolyToPath2(poly){
var path = document.createElementNS(poly.ownerSVGElement.namespaceURI,'path');
var segs = path.pathSegList;
var pts = poly.points;
for (var i=0,len=pts.numberOfItems;i<len;++i){
var pt = pts.getItem(i);
var func = i==0 ? 'createSVGPathSegMovetoAbs' : 'createSVGPathSegLinetoAbs';
segs.appendItem(path[func](pt.x,pt.y))
}
if (poly.tagName=='polygon') segs.appendItem(path.createSVGPathSegClosePath());
return path;
}
window.addEventListener(`DOMContentLoaded`, () => {
log(`DOM ready`);
Array.prototype.forEach.call(document.querySelectorAll('polygon,polyline'),function(poly){
var path1 = convertPolyToPath1(poly);
path1.setAttribute('class','cloned1');
path1.setAttribute('transform','translate(0,3)');
poly.parentNode.appendChild(path1);
var path2 = convertPolyToPath2(poly);
path2.setAttribute('class','cloned2');
path2.setAttribute('transform','translate(0,6)');
poly.parentNode.appendChild(path2);
});
});
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
svg all in one的更多相关文章
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
- 【Web动画】SVG 线条动画入门
通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...
- SVG:textPath深入理解
SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...
- SVG:linearGradient渐变在直线上失效的问题解决方案
SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...
- HTML5_05之SVG扩展、地理定位、拖放
1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg"> 方法二:<body><svg></svg>&l ...
- HTML5_04之SVG绘图
1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...
- 关于SVG的viewBox
在SVG中,通过svg标记的 width和height可以规定这段SVG代码所表达的数据在绘制时所占用的空间大小 如下代码svg设置了宽度与高度,rect同样,所以结果自然是全屏 <svg wi ...
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递C ...
- Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条
stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...
- Notes:SVG(3)---滤镜和渐变
SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...
随机推荐
- WPF mvvm 验证,耗时两天的解决方案
常用类 类名 介绍 ValidationRule 所有自定义验证规则的基类.提供了让用户定义验证规则的入口. ExceptionValidation 表示一个规则,该规则检查在绑定源属性更新过程中引发 ...
- 单点登录(SSO)的设计与实现
一.前言 1.SSO说明 SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.https://baike.baidu.c ...
- Java之五种遍历Map集合的方式
摘要:在java中所有的map都实现了Map接口,因此所有的Map都可以用以下的方式去遍历. 在java中所有的map都实现了Map接口,因此所有的Map都可以用以下的方式去遍历.这篇文章主要给大家介 ...
- linux:搭建java web环境
介绍 运行java web的环境 搭建 准备 Linux:Linux 操作系统 Apache Tomcat:Web 应用服务器 JDK:Java 开发工具包 jdk的安装 1.下载 链接 2.上传服务 ...
- 框架spring+strutrs+ibatis
Tomcat加载完成 --- Web.xml --- sql-map-config.xml --- 读取xml(*-ibatis-config) --- Jsp的url --- action方法 -- ...
- linux系统磁盘管理(磁盘阵列)
1.磁盘阵列简介 RAID(Redundant Array of Independent Disks)即独立硬盘冗余阵列,简称磁盘阵列.磁盘阵列是由很多价格较便宜的磁盘,以硬件(RAID卡)或软件(M ...
- Cisco WS-C4503-E CPU使用率高问题排查
现状描述: 办公网环境下由2台VSS模式下WS-C4503-E 作为核心交换机,下接若干台WS-C2960X-48LPS-L作为接入.行政同事在进行工位改造的时候为方便将原工位网线下联若干台hub. ...
- 解决GraphViz's executables not found
用python做决策树可视化时,出现了下面的错误: 于是安装Graphviz,并将其添加到path的环境变量. Graphviz下载 提取码:fmst 但是已经安装了pydotplus且import之 ...
- SpringMVC数据校验并通过国际化显示错误信息
目录 SpringMVC数据校验并通过国际化显示错误信息 SpringMVC数据校验 在页面中显示错误信息 通过国际化显示错误信息 SpringMVC数据校验并通过国际化显示错误信息 SpringMV ...
- Aery的UE4 C++游戏开发之旅(5)字符&字符串
目录 TCHAR 字符 使用TEXT()宏包裹字符串字面量 转换字符编码 FString 字符串 FString 剖析 FString 使用 FName 字符串 FName 剖析 FName 使用 F ...