SVG namespace & preview bug
SVG namespace & preview bug
error
This XML file does not appear to have any style information associated with it. The document tree is shown below.
bad xml close tag
Ok
solution & svg namespace
<?xml version="1.0" encoding="UTF-8"?>
<svg width="976px" height="471px" viewBox="0 0 976 471" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
responsive viewbox
svgAutoConvert(svgStr) {
const viewport = `<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`;
// const viewport = `<svg width="100%" height="100%" viewBox="0 0 1000 1000">`;
const xml = /<\?xml[\s\S]*\?>/i;
let result = ``;
result = svgStr.replace(xml,``);
let index = result.indexOf(`>`);
result = result.substr(index + 1);
result = viewport + result;
// log(`new result`, result);
return result;
},
svgAutoScale(svgStr) {
let result = ``;
// 匹配任意字符 (\s*\S\s*)* 或 [\s\S]* ???
const reg = /[\s\S]*^<svg(\s*\S\s*)*>$/i;
result = svgStr.replace(reg, `<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`);
log(`result`, result);
return result;
},
auto Svg Download
const autoSvgDownload = (filename = `live-map.svg`) =>{
const svg = document.querySelector(`svg`);
const html = svg.parentElement.innerHTML;
// xml namespace, support browser open preview
const xml = `<?xml version="1.0" encoding="UTF-8"?>\n${html}`;
console.log(`xml`, xml);
console.log(`encodeURIComponent(xml)`, encodeURIComponent(xml));
const element = document.createElement('a');
element.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(xml));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
demos
https://cdn.xgqfrms.xyz/svg/namespace/poly.svg
https://cdn.xgqfrms.xyz/svg/namespace/poly-bug.svg
SVG namespace & preview bug的更多相关文章
- svg click event bug & css pointer-events
svg click event bug & css pointer-events svg click event not working Error OK ??? css class /* d ...
- xunsearch使用namespace后bug修复
xunsearch在使用了namespace后会出现不能正常使用 错误例如以下: Fatal error: Uncaught [vendors\xunsearch\lib\XSException] . ...
- html fragment & svg remove xml namespace
html fragment & svg remove xml namespace https://developer.mozilla.org/en-US/docs/Web/API/Docume ...
- html --- SVG --- javascript --- 旋转矩形
可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML), 用于描述二维矢量图形的一种图形格式.SVG由W3C制定,是一个开放标准. 在 Inte ...
- W3C推进SVG规范Ver1.1(中文译稿)—Part I
转自:http://www.gispark.com/html/GISarticle/2006/1215/826.html Scalable Vector Graphics (SVG) 1.1 Spec ...
- Bootstrap v4.0.0-alpha.5 发布,大量更新
Bootstrap v4.0.0-alpha.5 发布了,Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的 ...
- css变换transform 以及 行内元素的一些说明
变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样]#test { transform: transla ...
- 为什么transform对行内元素不生效
注:赶时间的同学可直接下拉到底,看结论. 我使用transform对一个元素进行位移,代码如下: <div class="box"> <span>今天你吃了 ...
- anu - browser
import { oneObject, recyclables, typeNumber } from "./util"; //用于后端的元素节点 export function D ...
随机推荐
- COGS 307 模拟退火
307. [HAOI2006] 均分数据 ★★ 输入文件:data.in 输出文件:data.out 简单对比时间限制:3 s 内存限制:128 MB [问题描述] 已知N个正整数:A ...
- Java——数据类型
数据类型分类 基本数据类型: 数值型: 整数类型(byte,short,int,long): 浮点类型(float,double): 字符型(char): 布尔值(boolean): 引用数据类型: ...
- Java关键字及作用解释
访问控制 1) private 私有的 private 关键字是访问控制修饰符,可以应用于类.方法或字段(在类中声明的变量). 只能在声明 private(内部)类.方法或字段的类中引用这些类.方法或 ...
- 深入理解java虚拟机,GC参考手册
深入理解java虚拟机 一.<深入理解Java虚拟机> 1.第2章 Java内存区域与内存溢出异常 2.第3章 垃圾收集器与内存分配策略 3.第4章 虚拟机性能监控与故障处理工具 4.第5 ...
- (14)Linux绝对路径和相对路径
Linux 系统中,文件是存放在目录中的,而目录又可以存放在其他的目录中,因此,用户(或程序)可以借助文件名和目录名,从文件树中的任何地方开始,搜寻并定位所需的目录或文件. 说明目录或文件名位置的方法 ...
- JMM和volatile
1.volatile 2.JMM 3.代码示例 package com.yanshu; class MyNmuber{ volatile int number=10; public void addT ...
- 【poj 2976】Dropping tests(算法效率--01分数规划 模版题+二分){附【转】01分数规划问题}
P.S.又是一个抽时间学了2个小时的新东西......讲解在上半部分,题解在下半部分. 先说一下转的原文:http://www.cnblogs.com/perseawe/archive/2012/05 ...
- C# 同步和异步(概念理解)
C# 同步和异步 IO 概念区分 四个相关概念: 同步(Synchronous) 异步( Asynchronous) 阻塞( Blocking ) 非阻塞( Nonblocking) 同步异步图解 ...
- Zabbix 配置监控 & 触发器
Zabbix 自定义监控 zabbix-agent 获取数据,然后定义,交给 zabbix-server 端 Zabbix 配置监控项 监控的内容 # 监控服务器登录用户的数量 [root@web01 ...
- 给你的SpringBoot项目定制一个牛年专属banner吧
新春快乐,牛年大吉! 新的一年是牛年,在SpringBoot项目里自定义了一个牛年相关的banner,看起来可真不错. 上面是自己制作的一个banner,相关的ASCII字符在文末. SpringBo ...