如何打开SVG文件

SVG文件是什么

SVG是一种矢量图形的标记语言,用于绘制图像文件。SVG是Scalable Vector Graphics(可缩放的矢量图形)的缩写。在网页中广泛使用的一种图形文件格式,可以包含文本、、声音等多媒体元素。SVG文件的体积很小,下载速度快,而且能够表达出高质量的图象效果,它被广泛应用于WEB页面的制作和FLASH动画的制作中。

如何打开SVG文件

1Adobe Illustrator

AI工具就是最好的SVG格式打开工具了，不仅能够打开SVG格式的，还可以对进行编辑。

2AI改图神器

如果不想下载安装Adobe Illustrator，阿强推荐这个可以在线打开所有格式的万能在线编辑器——AI改图神器，只需要打开首页就能打开预览SVG格式的啦。

网站地址：imglogosccn

找到两个前端就能解决的方法，最后因为各种原因采用了方法二。
        方法一：
                找到地图上的全部点，然后在canvas上面重绘一次。
html2canvas(this$refstarget, {

useCORS: true, // 如果截图的内容里有,可能会有跨域的情况,加上这个参数,解决文件跨域问题
})then((canvas) => {
let cans = canvasgetContext("2d");
//批量地图重新打点 加载
documentquerySelectorAll("#mapView_layers image")forEach((item) => {
var obj = item;
var x = itemgetAttribute("x");
var y = itemgetAttribute("y");
var itemWidth = itemgetAttribute("width");
var itemHeight = itemgetAttribute("height");

consolelog("item", item, x, y);
if (width == 8) {
cansdrawImage(obj, x, y, itemWidth, itemHeight);
} else {
cansdrawImage(
obj,
x ,
y - 1 - itemHeight / 2 ,
itemWidth,
itemHeight
);
}
});

//下面是截图代码
})
登录后复制
因为本身目标dom的position定位问题，最后打的点可能会出现偏移。
所以还要给html2canvas加几个属性： x , y , scrollX , scrollY。保险起见，再加上两个参数 width 和 height 。
本人是后面chrome测着没问题，但是给小伙伴测试的时候，他用的360浏览器还有个xx浏览器有点问题。干脆参数全加上。
screenShot() {
let canvasBox = this$refstarget;
//获取目标div位置;
var tPosition = canvasBoxgetBoundingClientRect();
consolelog("size", tPosition);
// 获取父级的宽高
const width = parseInt(windowgetComputedStyle(canvasBox)width);
const height = parseInt(windowgetComputedStyle(canvasBox)height);
html2canvas(this$refstarget, {
width: width,
height: height,
x: 0,
y: 0,
scrollY: -tPositiony,
scrollX: -tPositionx,
useCORS: true, // 如果截图的内容里有,可能会有跨域的情况,加上这个参数,解决文件跨域问题
})then((canvas) => {

})
}
登录后复制
要是项目的地图是不可移动的，基本到这里就可以了。
但是地图只要一挪动。。一个新的bug出现了。。。。。整个地图画线打点层的偏移量和截图之前不一样。。。。 截图后，画线层偏的比原地图还要远，打点却还在原位没动过。。
这个问题需要修正svg的偏移，然后这个标注点绘制的时候也要加上一个偏移量。
地图偏移的bug后面再讲。
         方法二：（最后采用）
                把svg中所有的<image>的href路径转换为base64编码格式。简单方便，不用考虑位置什么的问题，就是有些浏览器里面加载慢。。。setTimeout有时候要设置大一点。。
screenShot() {
let canvasBox = this$refstarget;
//获取目标div位置;
var tPosition = canvasBoxgetBoundingClientRect();
consolelog("size", tPosition);
// 获取父级的宽高
const width = parseInt(windowgetComputedStyle(canvasBox)width);
const height = parseInt(windowgetComputedStyle(canvasBox)height);
//---------------------
//解决svg 内部image加载不了的问题,把image改为base64,配合setTimeout html2canvas使用
documentquerySelectorAll("#mapView_layers image")forEach((item) => {
consolelog("item", item);
var img = itemgetAttribute("xlink:href");
consolelog("href", img);
var image = new Image();
imagecrossOrigin = "";
imagesrc = img;
imageonload = () => {
var base64 = getBase64Image(image);
itemsetAttribute("xlink:href", base64); //更改href属性
};
});
//地址转为base64编码
function getBase64Image(img) {
var canvas = documentcreateElement("canvas");
canvaswidth = imgwidth;
canvasheight = imgheight;
var ctx = canvasgetContext("2d");
ctxdrawImage(img, 0, 0, imgwidth, imgheight);
var ext = imgsrcsubstring(imgsrclastIndexOf("") + 1)toLowerCase();
var dataURL = canvastoDataURL("image/" + ext);
return dataURL;
}
setTimeout(() => {
html2canvas(this$refstarget, {
width: width,
height: height,
x: 0,
y: 0,
scrollY: -tPositiony,
scrollX: -tPositionx,
useCORS: true, // 如果截图的内容里有,可能会有跨域的情况,加上这个参数,解决文件跨域问题
})then((canvas) => {

})
}, 200);
}
登录后复制

svg 是『矢量图』，相比于『位图』，矢量图的特点是不会随着放大而失真，能做到这一点，主要是由于矢量图存储的内容是对『图形的描述』
svg 适合描述一些简单的图形

下面来画第一个图形

svg 可以当做普通的 HTML 标签放在页面中，svg 标签的作用有点像 canvas，充当绘制图形的画布。如果绘制的图形超出了画图，则会被截断。
svg 提供一些标签来表达常用的基本图形，如 <circle/> <rect/> <ellipse/> <line/> <polygon/> <polyline/> <path/> ，分别对应圆、矩形、椭圆、线段、多边形、多段线、路径。
表达图形的具体属性不作介绍，请自行查阅资料。
有些属性可以放在CSS中：

有些则只能写在标签里，如下：

path 是一个更强大的 API，可以画出上面几种基本图形，还可以画出表现力更强的曲线。上面的几个标签的优势是使用方便。
有一些东西没有提到，比如 transform 变换：包括旋转、平移、缩放等，你可以自行去了解。
上文中的示例： 链接

SVG教程 | MDN
SVG 教程 | 菜鸟教程

方法/步骤
找到后缀名为svg格式的文件，我尝试用PS、AI打开都失败啦。
无奈之下，我想到了开发者工具，我打开网页，在键盘上按下F12，找到Resource并点击。
进入Resource下，找到Frames,并展开里面的内容。
在里面的内容中，我们找到FONTS，这个就是字体的意思。
5
展开FONTS，我们会看到那个后缀名为svg的文件，用鼠标左键点击这个文件，里面的内容会显示在右边。

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。
其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行 *** 作。

---