使用js操作将圆形svg元素更改为路径答案

【问题标题】：change circle svg element to path with js manipulation使用js操作将圆形svg元素更改为路径
【发布时间】：2021-12-31 08:46:24
【问题描述】：

svg 和 js 混合在一起完全是新手，在这里需要一些帮助。

我在我的网站中使用这个脚本： https://www.techdezine.com/background-blur-image-revealed-with-mouse-action/

我正在尝试改变圆形（使用元素）。

到一个菱形（或者可能是路径元素）（link to example），所以 javascript 仍然会更新不同形状的鼠标位置坐标

它包含这个 html

<div class="pic">
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
    <image filter="url(#filter2)" xlink:href="female.jpg" width="100%" height="100%"></image>
    <filter id="filter2">
        <feGaussianBlur stdDeviation="5" />
    </filter>
    <mask id="mask1">
        <circle cx="-50%" cy="-50%" r="40" fill="white" filter="url(#filter2)" />
    </mask>
    <image xlink:href="female.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
</svg>
</div>

并且正在使用这个 JS 进行操作

$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1 circle')[0];
    mask.setAttribute("cy", (upY - 5) + 'px');
    mask.setAttribute("cx", (upX) + 'px');
});

任何想法如何做到这一点，我太长了，仍然不知道。

【问题讨论】：

Google 可以为您提供许多关于 SVG 中的形状变形的文章和教程

标签： javascript svg

【解决方案1】：

解决办法

我设置了 transform="translate()" 属性，而不是 CY 和 CX 的 setAttributes。效果很好。

$('.pic').mousemove(function (event) {
 event.preventDefault();
 var upX = event.clientX;
 var upY = event.clientY;
 var mask = $('#mask1 circle')[0];
 var mask = jQuery('#mask1 polygon')[0];
 mask.setAttribute("transform", "translate(" + (upX) + ',' + (upY) + ')' );
});

和 HTML

<mask id="mask1">
        <polygon fill="white" points="69.445,125 125,28.774 180.556,125 
    125,221.227 " transform="translate(-125,-125)"/>

    </mask>

【讨论】：