html - 如何在 SVG 上反转透视变换

Question

假设我有一个 div，其中有两个 SVG 元素:svgPlan 和 svgIcon (其中是一个 SVG 图像元素)。

svgPlan:

svgIcon:

一组转换(透视、rotateX、缩放 和 translate) 应用于父元素(svgPlan):

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

转换后的svgPlan:

我想在svgPlan内显示svgIcon。

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

问题:我怎样才能取消我的子元素与父亲风格的继承(我相信目前在 SVG 上这是不可能的) ，或应用逆变换使图标显示没有任何透视或样式？

最小可重现示例:

    <div>
      <svg id="svgPlan" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2118.5 624.2" enable-background="new 0 0 2118.5 624.2" xml:space="preserve"
    style="transform:perspective(30em) rotateX(30deg) scale(1.17)">
         <rect width="1200" height="400" style="fill:rgb(224,224,224);stroke-width:3;stroke:rgb(0,0,0)" />
         <g id="svgIcon">
              <image x="550" y="120" width="120" height="120" xlink:href="https://svgshare.com/i/npz.svg">
              </image>
         </g>
      </svg>
    </div>

感谢您的帮助。

Answer 1

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

首先一些琐事:

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

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

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

让我们从基线纯 SVG 平面图像开始 - “ map ”概述，带有两个“标记”，无需转换:

<svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 800 400"
 stroke-width="10" stroke="black" fill="none">
 <g transform="translate(100 100)">
  <rect width="500" height="200" fill="silver"></rect>
  <path d="M 0 200 L 250 100 L 310 30 L 500 200" stroke="white"></path>
  <g transform="translate(250 100)">
   <circle r="20" fill="darkturquoise"></circle>
   <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"
   ></image>
  </g>
  <g transform="translate(310 30)">
   <circle r="20" fill="red"></circle>
   <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"
   ></image>
  </g>
 </g>
</svg>

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

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

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

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

Slope: 
<input type="range" value="30" min="0" max="90" value="0"
 oninput="s.style.setProperty('--slope', this.value);o.value=this.value">
 <output id="o">30</output>°.

<div class="scene" id="s">
 <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 500 200"
  stroke-width="10" stroke="black" fill="none">
  <rect width="500" height="200" fill="silver"></rect>
  <path d="M 0 200 L 250 100 L 310 30 L 500 200" stroke="white"></path>
  <g transform="translate(250 100)">
   <circle r="20" fill="darkturquoise"></circle>
  </g>
  <g transform="translate(310 30)">
   <circle r="20" fill="red"></circle>
  </g>
 </svg>
 <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">
 <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">
</div>

应该呈现如下内容:

对于单个 3D 变换，这适合；对于多个同时变换，要么应该涉及更多的数学运算，要么应该涉及更多嵌套的变换包装器。请参阅example of nested transform layers producing sprite-like "dots" in 3d space在笔中使用这种技术。