如何在 SVG 上反转透视变换

Question

假设我有一个 div，其中有两个 SVG 元素：svgPlan和svgIcon（这是一个 SVG 图像元素）。

svg计划：

svg图标：

一组变换（透视、旋转X、缩放和平移）应用于父元素（svgPlan）：

svg.style('transform', 'perspective(30em) rotateX(33deg) scale(1.7) translate(0%, -6%)');

转换后的 svgPlan：

我想在svgPlan内显示svgIcon。

问题：转换应用于父元素svgPlan和子元素svgIcon。看起来孩子会自动继承应用于父母的样式，这不是我想要的。我希望图标出现时没有任何效果。

问题：我怎样才能从父亲的风格中取消子元素的继承（我相信目前在 SVG 上这是不可能的），或者应用逆变换以使图标在没有任何透视或风格的情况下出现？

最小可重复示例：

svg.style('transform', 'perspective(30em) rotateX(33deg) scale(1.7) translate(0%, -6%)');

感谢您的帮助。

Answer 1

这个答案提出的解决方案与 SVG 不太相关，而是使用更通用的方法，其中 CSS 的透视变换专门应用于 HTML 元素 - 其中一些可能是或可能包含 SVG 图像。

\n

先说一些琐事：

\n

\n
• SVG 没有第三维（“z 轴”），因此不可能进行维度变换或透视，除非您自己完成所有数学运算。它甚至没有z-index，层只是由源 (DOM) 的出现顺序表示。SVG 本质上只是一个“平面”二维矢量图形。
\n
• SVG 将许多 CSS 样式属性映射到其表示属性，但由于在 SVG 中没有rotate3d、translate3d等rotatex()，因此它们没有任何效果。
\n
• HTML 中的 CSS 就有这些。
\n
• 在您的代码片段中，您将 CSS 转换应用到 HTML 节点，根据定义，该节点只是平面上的一个矩形（就像页面中的所有内容一样）。在您的情况下，该节点是一个 SVG 元素，但它可能是一个<div>带有背景图像或只是 HTML <img>- 在所有情况下，这些只是“视口”矩形，在无限（可能已转换）平面内显示（SVG）内容。
\n
• 所以你不能“从中弹出一些东西”；您只能操作由 HTML 元素构成的“平面”。
\n

\n

据我了解，您的用例是显示诸如“精灵”之类的标记图标，这些图标始终面向某些倾斜图像（例如“地图”）上方的相机。从您的问题来看，尚不清楚远处的图标（距离相机较远的图标）是否应该更小并与较近的图标重叠（感觉更自然，但与“不继承”的立场相矛盾）还是每个图标大小相同，并且具有未定义的重叠策略。让我们假设是前者。

\n

在“HTML”世界中，您可以嵌套转换后的元素并让子级与父级一起移动（在 的帮助下transform-style: preserve-3d;）以将它们带到所需的位置，然后对其子级应用否定变换以使它们再次面向相机。

\n

让我们从基线纯 SVG 平面图像开始 - “地图”概述，带有两个没有转换的“标记”：

\n

\r\n

\r\n

<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox="0 0 800 400"\n stroke-width="10" stroke="black" fill="none">\n <g transform="translate(100 100)">\n  <rect width="500" height="200" fill="silver"></rect>\n  <path d="M 0 200 L 250 100 L 310 30 L 500 200" stroke="white"></path>\n  <g transform="translate(250 100)">\n   <circle r="20" fill="darkturquoise"></circle>\n   <image width="80" height="100" transform="translate(-40 -100)" preserveAspectRatio="none" href="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-200 -200 400 516\' stroke=\'black\' stroke-width=\'20\'%3E%3Cpath fill=\'red\' d=\'M187-14c-15-232-359-232-374 0l-1 23c0 131 77 244 188 297A329 329 0 0 0 187-14z\'/%3E%3Ccircle fill=\'darkturquoise\' r=\'127\'/%3E%3Ctext font-size=\'150\' text-anchor=\'middle\' stroke=\'none\' %3Ea%3C/text%3E%3C/svg%3E"\n   ></image>\n  </g>\n  <g transform="translate(310 30)">\n   <circle r="20" fill="red"></circle>\n   <image width="80" height="100" transform="translate(-40 -100)" preserveAspectRatio="none" href="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-200 -200 400 516\' stroke=\'black\' stroke-width=\'20\'%3E%3Cpath fill=\'darkturquoise\' d=\'M187-14c-15-232-359-232-374 0l-1 23c0 131 77 244 188 297A329 329 0 0 0 187-14z\'/%3E%3Ccircle fill=\'red\' r=\'127\'/%3E%3Ctext font-size=\'150\' text-anchor=\'middle\' stroke=\'none\' %3Eb%3C/text%3E%3C/svg%3E"\n   ></image>\n  </g>\n </g>\n</svg>

\r\n

\r\n

\r\n

\n

（我已将图像图标提取到简化的 dataURI，并将定位更改为组转换，以获得更好的可重用性和独立性。）

\n

\n

现在让我们介绍一下坡度和图标“精灵”。

\n

\n
• SVG 现在没有图标，并且图标是独立的<img>。
\n
• 每个都<img>被定位并转换到地图上的相应位置。这里的自定义属性有助于提高可重用性，但静态值也可以进行硬编码。
\n
• 自定义属性--slope还calc简化了“自动化”，并允许从范围输入启动更改。
\n

\n

\r\n

\r\n

.scene {\n position: relative;\n width: 500px;\n height: 200px;\n margin: 50px 10px;\n transform-origin: center center;\n transform-style: preserve-3d; /* this is important */\n --rotx-positive: calc( var(--slope, 30) * 1deg );\n --rotx-negative: calc( var(--rotx-positive) * -1 );\n transform:\n  perspective(5em)\n  /* slope: */\n  rotateX(var(--rotx-positive));\n}\nimg {\n position: absolute;\n top: calc(1px * var(--y));\n left: calc(1px * var(--x));\n transform:\n  /* to have the bottom center peak touching the POI: */\n  translate(-50%, -100%)\n  /* negate the slope: */\n  rotatex( var(--rotx-negative) );\n transform-origin: bottom center;\n}\n/*\n Unrelated hotfix: when the scene is tilted perpendicularly to camera (slope is 90\xc2\xb0 and) it is invisible, but *obstructs* whole viewport (or something), so there is no way to return back.\n Presumably because the camera happents to be "inside" it (?)  - its bottom edge is behind the camera.\n*/\n.scene {\n pointer-events: none; \n}

\r\n

Slope: \n<input type="range" value="30" min="0" max="90" value="0"\n oninput="s.style.setProperty(\'--slope\', this.value);o.value=this.value">\n <output id="o">30</output>\xc2\xb0.\n\n<div class="scene" id="s">\n <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox="0 0 500 200"\n  stroke-width="10" stroke="black" fill="none">\n  <rect width="500" height="200" fill="silver"></rect>\n  <path d="M 0 200 L 250 100 L 310 30 L 500 200" stroke="white"></path>\n  <g transform="translate(250 100)">\n   <circle r="20" fill="darkturquoise"></circle>\n  </g>\n  <g transform="translate(310 30)">\n   <circle r="20" fill="red"></circle>\n  </g>\n </svg>\n <img style="--x: 250; --y: 100;" width="80" height="100" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-200 -200 400 516\' stroke=\'black\' stroke-width=\'20\'%3E%3Cpath fill=\'red\' d=\'M187-14c-15-232-359-232-374 0l-1 23c0 131 77 244 188 297A329 329 0 0 0 187-14z\'/%3E%3Ccircle fill=\'darkturquoise\' r=\'127\'/%3E%3Ctext font-size=\'150\' text-anchor=\'middle\' stroke=\'none\' %3Ea%3C/text%3E%3C/svg%3E">\n <img style="--x: 310; --y: 30;" width="80" height="100" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-200 -200 400 516\' stroke=\'black\' stroke-width=\'20\'%3E%3Cpath fill=\'darkturquoise\' d=\'M187-14c-15-232-359-232-374 0l-1 23c0 131 77 244 188 297A329 329 0 0 0 187-14z\'/%3E%3Ccircle fill=\'red\' r=\'127\'/%3E%3Ctext font-size=\'150\' text-anchor=\'middle\' stroke=\'none\' %3Eb%3C/text%3E%3C/svg%3E">\n</div>

\r\n

\r\n

\r\n

\n

应该呈现如下内容：\n

\n

对于单个 3D 变换，这适合；对于多个同时变换，要么应该涉及更多的数学运算，要么应该涉及更多嵌套的变换包装器。请参阅使用此技术在笔中的 3D 空间中生成类似精灵的“点”的嵌套变换层的示例。

\n