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 ...
随机推荐
- java 本地方法(JNI)
最近搞了一个调用第三方so库做登录认证的任务,以前对JNI没什么概念,最近学习了 <java核心技术> 本地方法 一章,把自己写的一些例子记录一下. 自己C语言真是渣渣,所以所有的例子都在 ...
- LOJ10128. 花神游历各国
花神喜欢步行游历各国,顺便虐爆各地竞赛.花神有一条游览路线,它是线型的,也就是说,所有游历国家呈一条线的形状排列,花神对每个国家都有一个喜欢程度(当然花神并不一定喜欢所有国家). 每一次旅行中,花神会 ...
- maven pom文件的 name 标签 和 url标签到底是什么作用
- Language Guide (proto3) | proto3 语言指南(二)标量值类型
标量值类型 标量消息字段可以具有以下类型之一 -- 下表显示了.proto文件中指定的类型,以及自动生成的类中相应的类型: .proto Type 说明 C++ Type Java Type Pyth ...
- 提高 Kafka 吞吐量
提高 Kafka 吞吐量 1.了解分区的数据速率,以确保提供合适的数据保存空间 2.除非您有其他架构上的需要,否则在写 Topic 时请使用随机分区 3.如果 Consumers 运行的是比 Kafk ...
- python自动化之使用allure生成测试报告
Allure测试报告框架帮助你轻松实现"高大上"报告展示.本文通过示例演示如何从0到1集成Allure测试框架.重点展示了如何将Allure集成到已有的自动化测试工程中.以及如何实 ...
- C - 小希的迷宫
上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道连通了 ...
- Codeforces Round #594 (Div. 2) D1 - The World Is Just a Programming Task (贪心)
思路:枚举换的位置i,j 然后我们要先判断改序列能否完全匹配 如果可以 那我们就需要把差值最大的位置换过来 然后直接判断就行
- hdu5497 Inversion
Problem Description You have a sequence {a1,a2,...,an} and you can delete a contiguous subsequence o ...
- c++派生类中构造函数和析构函数执行顺序、判断对象类型、抽象类、虚函数
一. 代码: 1 #include<stdio.h> 2 #include<string.h> 3 #include<algorithm> 4 #include&l ...