gpt4 book ai didi

javascript - svg : unexpected behaviour 上的矩阵变换

转载 作者:行者123 更新时间:2023-11-29 10:26:15 26 4
gpt4 key购买 nike

我有一个包含 300x300 像素的 SVG 图像和 1000x1000 的 View 框的 div。该图像描述了红色矩形顶部的蓝色矩形。当我移动鼠标时,一个圆圈跟随图像内的鼠标位置:

enter image description here

一切都很完美,除了当我应用变换改变透视和旋转时,鼠标指针和圆心不再匹配:

enter image description here

代码在这里:

$(function() {
$('#image').mousemove(function(event) {
var svg = document.querySelector('svg');
var pt = svg.createSVGPoint();
pt.x = event.clientX;
pt.y = event.clientY;
pt = pt.matrixTransform(svg.getScreenCTM().inverse());
overlay = document.getElementById('overlay');
$('#overlay').html(
"<circle cx='" + pt.x + "' cy='" + pt.y + "' r='50' stroke='#8f00ff' fill='transparent' stroke-width='10' /></svg>"
);
refresh = $("#overlay").html();
$("#overlay").html( refresh )
});
});
function Transform() {
$('#image').css({
transformOrigin: '500px 500px',
transform: 'perspective(100px) rotateX(5deg)'
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='image' tabindex='0' >
<svg id='svgmap' width='300' height='300' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1000 1000'>
<rect x='0' y='0' width='1000' height='1000' fill='red' />
<rect x='250' y='250' width='500' height='500' stroke='yellow' fill='blue' stroke-width='10' />
<g id='overlay'></g>
</svg>
</div>
<button onclick='Transform()'>Transform</button>

我的目标是保持紫色圆圈中心和鼠标指针之间的匹配,即使在对对象应用变换时也是如此。有办法吗?

最佳答案

在您的代码中,#image 是一个 div。为了使其工作,您需要将转换应用于 svg 元素 (#svgmap),并且转换必须是 svg 转换。

$(function() {
$('#svgmap').mousemove(function(event) {
var svg = document.querySelector('svg');
var pt = svg.createSVGPoint();
pt.x = event.clientX;
pt.y = event.clientY;
pt = pt.matrixTransform(svg.getScreenCTM().inverse());
overlay = document.getElementById('overlay');
$('#overlay').html(
"<circle cx='" + pt.x + "' cy='" + pt.y + "' r='50' stroke='#8f00ff' fill='transparent' stroke-width='10' /></svg>"
);
refresh = $("#layer_wafer").html();
$("#layer_wafer").html( refresh )
});
});
function Transform() {
svgmap.setAttributeNS(null,"transform", "skewX(-20) translate(100)");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='image' tabindex='0' >
<svg id='svgmap' width='300' height='300' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 1000 1000' transform="">
<rect x='0' y='0' width='1000' height='1000' fill='red' />

<rect x='250' y='250' width='500' height='500' stroke='yellow' fill='blue' stroke-width='10' />
<g id='overlay'></g>
</svg>
</div>
<button onclick='Transform()'>Transform</button>

我知道您需要 3D css 转换,但这(至少目前)不起作用。

这是一篇文章,您可以在其中阅读更多关于 svg 中的 3d 变换的信息:https://oreillymedia.github.io/Using_SVG/extras/ch11-3d.html在文章中您可以阅读:本节中描述的所有 3D 转换功能都应被视为“ future ”

关于javascript - svg : unexpected behaviour 上的矩阵变换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58545964/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com