[英]Catch changes on SVG element circle and change attributes elsewhere via js
[英]change circle svg element to path with js manipulation
svg 和 js 混合在一起是全新的,在這里需要一些幫助。
我在我的網站上使用這個腳本: https://www.techdezine.com/background-blur-image-revealed-with-mouse-action/
我正在嘗試更改圓形(使用 < circle > 元素)。
到菱形(或可能是路徑元素)( 鏈接到示例),因此 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');
});
任何想法如何做到這一點,我太長了,仍然不知道。
解決方案
我設置了 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.