如何从DOM转换为SVG坐标并再次返回-css教程-PHP中文网

How to Translate from DOM to SVG Coordinates and Back Again

关键要点

SVG拥有自身基于viewBox属性定义的坐标系，可缩放至任意尺寸。这使得根据光标位置添加SVG元素变得复杂，尤其是在响应式设计中。
嵌入HTML页面的SVG成为DOM的一部分，可像其他元素一样操作。这允许完全避免坐标系间的转换。
从DOM到SVG坐标的转换可通过getBoundingClientRect()方法提取位置和尺寸来实现。然而，从SVG到DOM坐标的转换更具挑战性，需要使用SVG自身的矩阵分解机制。
SVG或单个元素可以通过平移、缩放、旋转和/或倾斜进行变换，这会影响最终的SVG坐标。.getScreenCTM()方法可应用于任何元素以及SVG本身，以考虑所有变换。

使用SVG相对简单——直到您想混合DOM和矢量交互。

SVGs在其viewBox属性中定义了自己的坐标系。例如：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

登录后复制

这设置了从0,0开始的800单位宽度和600单位高度。这些单位是用于绘图的任意测量单位，可以使用单位的小数部分。如果您将此SVG放置在800 x 600像素的区域中，每个SVG单位应该直接映射到一个屏幕像素。

但是，矢量图像可以缩放至任意大小——尤其是在响应式设计中。您的SVG可以缩小到400 x 300，甚至可以在10 x 1000的空间中拉伸变形。如果您想根据光标位置放置它们，则向此SVG添加更多元素会变得更加困难。

注意：有关SVG坐标的更多信息，请参阅Sara Soueidan的视口、viewBox和preserveAspectRatio文章。

避免坐标转换

您也许能够完全避免坐标系之间的转换。

嵌入HTML页面（而不是图像或CSS背景）的SVG成为DOM的一部分，可以像其他元素一样进行操作。例如，一个包含单个圆的基本SVG：

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

登录后复制

您可以对其应用CSS效果：

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}

登录后复制

您还可以附加事件处理程序来修改属性：

const mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', (e) => {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
});

登录后复制

下面的示例向SVG图像添加三十个随机圆圈，在CSS中应用悬停效果，并在单击圆圈时使用JavaScript将半径增加十个单位。

查看CodePen上的示例

SVG到DOM坐标转换

可能需要将DOM元素叠加在SVG元素之上——例如，在世界地图上显示的活动国家/地区上显示菜单或信息框。假设SVG嵌入到HTML中，元素成为DOM的一部分，因此可以使用getBoundingClientRect()方法提取位置和尺寸。（在上面的示例中打开控制台，以显示半径增加后单击圆圈的新属性。）

Element.getBoundingClientRect()在所有浏览器中都受支持，并返回一个DOMRect对象，其中包含以下像素尺寸属性：

.x和.left：元素左侧相对于视口原点的x坐标
.right：元素右侧相对于视口原点的x坐标
.y和.top：元素顶部相对于视口原点的y坐标
.bottom：元素底部相对于视口原点的y坐标
.width：元素的宽度（在IE8及以下版本中不受支持，但与.right减去.left相同）
.height：元素的高度（在IE8及以下版本中不受支持，但与.bottom减去.top相同）

所有坐标都相对于浏览器视口，因此在页面滚动时会发生变化。可以通过将window.scrollX添加到.left和window.scrollY添加到.top来计算页面上的绝对位置。

DOM到SVG坐标转换

这更具挑战性。假设您想将新的SVG元素放置在其viewBox上单击事件发生的位置。事件处理程序对象提供DOM .clientX和.clientY像素坐标，但必须将其转换为SVG单位。

您可能会认为可以通过应用乘法因子来计算SVG点的坐标。例如，如果1000单位宽度的SVG放置在500像素宽的容器中，您可以将任何DOM x坐标乘以2以获得SVG位置。这行不通！…

不能保证SVG完全适合您的容器。
如果元素尺寸发生变化——也许是响应用户调整浏览器大小——则必须重新计算宽度和高度因子。
SVG或一个或多个元素可以在2D或3D空间中进行变换。
即使您克服了这些障碍，它也永远不会像您预期的那样工作，并且经常存在误差。

幸运的是，SVG提供了自身的矩阵分解机制来转换坐标。第一步是使用createSVGPoint()方法在SVG上创建一个点，并将屏幕/事件x和y坐标传入：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

登录后复制

然后，您可以应用从SVG的.getScreenCTM()方法的逆矩阵创建的矩阵变换，该方法将SVG单位映射到屏幕坐标：

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

登录后复制

svgP现在具有.x和.y属性，它们提供SVG viewBox上的坐标。

以下代码将圆圈放置在SVG画布上单击的点处：

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #fff;
}

登录后复制

注意：createElementNS()方法与标准DOM createElement()方法相同，只是它指定了一个XML命名空间URI。换句话说，它作用于SVG文档而不是HTML。

转换为变换的SVG坐标

还有一个更复杂的方面。SVG或单个元素可以通过平移、缩放、旋转和/或倾斜进行变换，这会影响最终的SVG坐标。例如，以下<g>图层比标准SVG单位大4倍，因此坐标将是包含SVG坐标的四分之一：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"></svg>

登录后复制

生成的矩形看起来在位置200, 200处具有400单位的宽度和高度。

幸运的是，.getScreenCTM()方法可以应用于任何元素以及SVG本身。生成的矩阵考虑所有变换，因此您可以创建一个简单的svgPoint()转换函数：

<svg id="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
  <circle id="mycircle" cx="400" cy="300" r="50" />
</svg>

登录后复制

以下演示在所有现代浏览器中都能工作，(如果您将JavaScript转换为ES5，则在IE11中也能工作！)。当点击/点击SVG时，会在光标点添加一个圆圈。

当点击变换的<g>区域时也会发生这种情况，但是将该元素而不是SVG本身传递给svgPoint()函数以确保计算正确的坐标：

查看CodePen上的示例

理想情况下，最好避免DOM到/从SVG坐标转换，但是，当不可能这样做时，请使用上面描述的方法来确保该过程在所有页面尺寸下都健壮。

关于从DOM到SVG坐标以及反向转换的常见问题解答

DOM和SVG坐标有什么区别？

文档对象模型（DOM）和可缩放矢量图形（SVG）都是Web开发的组成部分，但它们具有不同的用途。DOM是HTML和XML文档的编程接口。它表示文档的结构，并提供了一种操作其内容和视觉表示的方法。另一方面，SVG是一种基于XML的矢量图像格式，用于二维图形。两者之间的主要区别在于它们的坐标系。DOM使用基于像素的坐标系，而SVG使用基于viewBox属性的系统，该系统可以缩放和转换。

如何将DOM坐标转换为SVG坐标？

将DOM坐标转换为SVG坐标涉及使用SVG元素的createSVGPoint方法在SVG坐标系中创建一个点。然后，您可以使用matrixTransform方法将该点转换为SVG坐标系。此方法采用DOMMatrix对象，该对象表示SVG元素的变换矩阵。

如何将SVG坐标转换回DOM坐标？

要将SVG坐标转换回DOM坐标，您可以使用SVGMatrix对象的inverse方法。此方法返回一个新的SVGMatrix对象，它是原始矩阵的逆矩阵。通过将SVG点乘以此逆矩阵，您可以将其转换回DOM坐标系。

viewBox属性在SVG中的作用是什么？

SVG中的viewBox属性用于指定SVG图像的纵横比和坐标系。它允许您控制SVG元素的缩放和定位。viewBox属性采用四个值：min-x、min-y、width和height。这些值定义了SVG坐标系中的矩形。

如何在我的项目中使用DOM到SVG包？

DOM到SVG包是用于将DOM坐标转换为SVG坐标以及反向转换的有用工具。要在您的项目中使用它，您需要使用npm（JavaScript编程语言的包管理器）安装它。安装后，您可以在JavaScript文件中引入它并使用其方法执行转换。

SVG中的cx属性是什么？

SVG中的cx属性用于指定圆心x坐标。它是创建SVG圆的基本属性之一。cx属性的值是用户坐标系中的长度。

我可以在网页中同时使用DOM和SVG吗？

是的，您可以在网页中同时使用DOM和SVG。SVG嵌入在HTML中，因此它是DOM的一部分。您可以使用DOM方法和属性来操作SVG元素。这使您能够在网页上创建动态和交互式图形。

SVG中的坐标系与HTML中的坐标系有何不同？

SVG中的坐标系与HTML中的坐标系不同。在HTML中，坐标系是基于像素的，原点位于页面的左上角。在SVG中，坐标系由viewBox属性定义，原点位于viewBox的左上角。这使得SVG图形可以缩放且与分辨率无关。

如何转换SVG坐标？

您可以使用transform属性转换SVG坐标。此属性允许您对SVG元素应用各种变换，例如平移、旋转、缩放和倾斜。transform属性的值是变换函数列表，每个函数都按列出的顺序应用于元素。

在DOM和SVG坐标之间转换的一些常见用例是什么？

在许多情况下，在DOM和SVG坐标之间进行转换非常有用。例如，如果您正在创建交互式SVG图形，您可能需要将鼠标坐标（位于DOM坐标系中）转换为SVG坐标以操作SVG元素。相反，如果您正在创建自定义SVG元素，您可能需要将其坐标转换回DOM坐标系以将其正确放置在页面上。

以上是如何从DOM转换为SVG坐标并再次返回的详细内容。更多信息请关注PHP中文网其他相关文章！