Question

我需要在点击位置放置一个svg path元素

我的示例代码如下

const svg = document.querySelector('svg');
const viewBox = svg.getAttribute('viewBox').split(' ');
const offset = svg.getBoundingClientRect();

svg.addEventListener('click', (e) => {
    const width = svg.clientWidth;
    const ratio = viewBox[2] / width;

    const x = (e.pageX - offset.x) * ratio ;
    const y = (e.pageY - offset.y) * ratio;

    const tp = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    tp.setAttribute('fill', 'F7931E');
    tp.setAttribute('stroke', '#000');
    tp.setAttribute('d', 'M37,17v15H14V17z M50,0H0v50h50z');
    tp.setAttribute('transform', `scale(1) translate(${x}, ${y })`);

    svg.appendChild(tp);
});

DEMO

正如您所看到的，为了使您点击的path成为可能，需要考虑很多因素。现在，我想缩放path

 tp.setAttribute('transform', `scale(.3) translate(${x}, ${y})`);

不幸的是，这改变了一切; DEMO with scale = .3

所以问题是，在这种情况下如何计算正确的变换值？

可能有点相关，如您所见，如果缩放关闭，则放置path以使鼠标指针位于左上角。我想把它放在它的中心。任何guidinance将不胜感激！

最后一点，我正在寻找一种通用的解决方案，这意味着它适用于任何形状

将svg元素放置在应用了变换比例的单击位置

0 个答案: