svg下css定位和添加css3动画之后定位失效问题，解决小红包酬谢

搜了几篇老外的文章，提到svg的forginObject内的HTML元素，当应用CSS3动画时，动画的transform-origin是基于最外层body定位的，貌似无解。

个人建议使用svg的SMIL动画来实现波纹特效，你大屏展示用的话，兼容性啥的应该不是主要问题

用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸的方法:

1、使用getElementById获取svg节点对象：

var el = documentgetElementById("yourElement");

2、调用getBoundingClientRect获取path的边界矩形的位置：

var rect = elgetBoundingClientRect();

3、分别获取width和height属性就得到实际位置了。

consolelog( rectwidth );

consolelog( rectheight);

1、右击选择属性，在详细信息处可以看到图像的尺寸、宽度、dpi分辨率等信息。

2、DPI是打印机、鼠标等设备分辨率的单位。这是衡量打印机打印精度的主要参数之一，该值越大，表明打印机的打印精度越高。

3、dpi是指每英寸的像素，也就是扫描精度。国际上都是计算一平方英寸面积内像素的多少。dpi越小，扫描的清晰度越低，由于受网络传输速度的影响。

<div class="el-loading-mask is-fullscreen">

<div class="el-loading-spinner">

<svg viewBox="25 25 50 50" class="circular">

<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>

</svg>

<p class="el-loading-text">Loading…</p>

</div>

</div>

/ 加载动画 /

el-loading-maskis-fullscreen { position: fixed; }

el-loading-mask { background-color: hsla(0,0%,100%,4)!important; }

el-loading-mask { position: absolute; z-index: 10000; background-color: hsla(0,0%,100%,9); margin: 0; top: 0; right: 0; bottom: 0; left: 0; transition: opacity 3s; }

el-loading-maskis-fullscreen el-loading-spinner { margin-top: -25px; }

el-loading-spinner { top: 50%; margin-top: -21px; width: 100%; text-align: center; position: absolute; }

el-loading-maskis-fullscreen el-loading-spinner circular { width: 50px; height: 50px; }

el-loading-spinner circular { width: 42px; height: 42px; animation: loading-rotate 2s linear infinite; }

svg:not(:root) { overflow: hidden; }

el-loading-spinner el-loading-text { color: #ff495e !important; }

el-loading-spinner el-loading-text { color: #20a0ff; margin: 3px 0; font-size: 14px; }

el-loading-spinner path { stroke: #ff495e !important; }

el-loading-spinner path {

    animation: loading-dash 15s ease-in-out infinite;

    stroke-dasharray: 90,150;

    stroke-dashoffset: 0;

    stroke-width: 2;

    stroke: #20a0ff;

    stroke-linecap: round;

}

@keyframes loading-rotate {

to {

transform:rotate(1turn)

}

}@keyframes loading-dash {

0% {

stroke-dasharray:1,200;

stroke-dashoffset:0

}

50% {

stroke-dasharray:90,150;

stroke-dashoffset:-40px

}

to {

stroke-dasharray:90,150;

stroke-dashoffset:-120px

}

/ 加载动画end  /

可以通过获取g标签的第一个子节点，用它的x,y坐标。或者把g标签换成svg标签，这样可以获取x,y的坐标值。

<svg >

<svg id="g1" x=20 y=20>

<rect id="1"></rect>

<rect id="2"></rect>

<rect id="3"></rect>

</svg>

<svg >

documentgetElementById("g1")xanimValvalue;

>

1、背景

SVG是Scalable Vector Graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过XML来表现矢量图形的技术——SVG！由于SVG也是一种XML文件，所以SVG也继承了XML的开放性、可移植性和交互性的优点。如今几乎所有主流的浏览器都支持SVG，大家可以从 这里 得到更多的兼容信息，其中包括：

使用<embed>或者<object>元素来显示基本的SVG图形；

使用<img>来显示SVG图形；

将SVG图形应用为CSS背景图；

直接在HTML文档中使用<svg>标签（需要HTML5支持）；

对使用CSS或者外部对象元素的HTML元素使用SVG变换、滤镜等特效；

对SVG对象使用类似photoshop的效果，包括模糊和色彩处理；

对SVG图像使用动画；

使用SVG格式的字体；

2、图形系统

目前在计算机上主要有两种形式来表现图形，一种是栅格图形，另一种是矢量图形。

21 栅格图形

在栅格图形中，图像用像元或者像素的矩形阵列来表示，每个像素代表一个RGB颜色值或者是一个指向颜色列表的索引。通常以一种压缩格式来存储（如JPEG, GIF, PNG等），由于现在大部分的显示设备都是栅格设备，所以显示这些图形只需要做解压处理就可以了。

22 矢量图形

在矢量图形系统中，图形被描述为一些列的形状，它是特定坐标的集合。显示矢量图形需要按照特定的命令来绘制这些坐标，然后显示在屏幕上。矢量图形是对象，而不是一系列的像素。它们可以改变颜色、形状还有大小，图形中的文字都是可以被检索的，这些与栅格图形都有很大的不同。

23 为什么要使用矢量图形

绝大部分情况下，我们都在使用栅格图形，而且创建栅格图形的工具更容易获得和使用。但是矢量图形有一个栅格图形无法替代的优势：无论如何的缩放，矢量图形都不会失真。这使得当我们需要具有精确测量以及看清图形细节的放大能力时，矢量图形显得尤其重要。

3、创建一个SVG图形

下面首先创建一个SVG图形，这里我并不会详细的讲解各个标签，只是先给一个感性的认识，随后的章节会对SVG的语法做详细的介绍。看代码：

1 <xml version="10">

2 <!DOCTYPE svg PUBLIC "//W3C//DTD SVG 10//EN" ">

以上就是关于svg下css定位和添加css3动画之后定位失效问题，解决小红包酬谢全部的内容，包括:svg下css定位和添加css3动画之后定位失效问题，解决小红包酬谢、如何用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸、svg怎么看dpi等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！