如何制作没有子元素的 svg 盒子矩阵 3d

问题描述 投票：0回答：1

我有matrix3d类svg父级，如何让它在没有子路径的情况下改变？

.matrix {
  overflow: visible;
  transform: matrix3d(0.524752, -0.50495, 0, 0.010099, -0.475248, 0.49505, 0, 0.0095049, 0, 0, 1, 0, 1.48515, -1.48515, 0, 1);
}

<svg width="100" height="100" viewBox="0 0 100 100" class="matrix">
  <defs>
    <path id="mainPathzcqIaELTHAEdckU0" d="M0 0L0 100L100 0Z"></path>
    <clipPath id="clipzcqIaELTHAEdckU0"><use xlink:href="#mainPathzcqIaELTHAEdckU0"></use></clipPath>
  </defs>
  <g><use xlink:href="#mainPathzcqIaELTHAEdckU0" fill="#f4f1e9" stroke="#cbbda0" stroke-width="4" clip-path="url(#clipzcqIaELTHAEdckU0)"></use></g>
</svg>

我尝试过preserve-3d，但它不起作用

transform-style: preserve-3d;

enter image description here

css svg matrix transform
1个回答
0
投票

我已经更改了变换 css 值，我想结果就是您在“预期”输出中提到的结果。看看：

.matrix {
  transform: matrix3d(-0.7071, 0, 0, 0.7071, 0.7071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}

输出： [1]：https://i.sstatic.net/kZaXtXib.png

<!DOCTYPE html>
<html>
<head>
<title>SVG Transformation Example</title>
<style>
.matrix {
  transform: matrix3d(-0.7071, 0, 0, 0.7071, 0.7071, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

}
</style>
</head>
<body>

<svg width="100" height="100" viewBox="0 0 100 100" class="matrix">
  <defs>
    <path id="mainPathzcqIaELTHAEdckU0" d="M0 0L0 100L100 0Z"></path>
    <clipPath id="clipzcqIaELTHAEdckU0"><use xlink:href="#mainPathzcqIaELTHAEdckU0"></use></clipPath>
  </defs>
  <g><use xlink:href="#mainPathzcqIaELTHAEdckU0" fill="#f4f1e9" stroke="#cbbda0" stroke-width="4" clip-path="url(#clipzcqIaELTHAEdckU0)"></use></g>
</svg>
</div>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.