Javascript 用于具有圆角的矩形元素的涟漪效应SVG

我正在研究SVG中单击的涟漪效应。涟漪效应的基本思想是，只要用户单击rect标记，就会根据单击的坐标和rect标记的尺寸创建一个圆形元素并设置动画。但是为了保持矩形内的圆，我使用了符号标记，它可以很好地工作，但只适用于没有rx，ry属性的矩形。主要的问题是保持圆角矩形中的圆

涟漪
：根{
--半径：0；
}
.涟漪{
动画：波纹600毫秒线性；
}
@关键帧波纹{
到{
r:var（--半径）；
不透明度：0；
}
}
const svg=document.getElementById（'svg'）；
const rect=document.getElementById（'rec'）；
const rect2=document.getElementById（'rec2'）；
setRipple（svg、rect、document.querySelector（“#ripp”）、“red”）；
setRipple（svg、rect2、document.querySelector（“#ripp2”）、“white”）；
函数setRipple（svg、rect、符号、颜色）{
函数GetActualCor（元素，X，Y）{
设pt=elem.createSVGPoint（）；
pt.x=x；
pt.y=y；
返回pt.matrixTransform（elem.getScreenCTM（）.inverse（））；
}
rect.addEventListener（'click'，clickHandler）；
函数clickHandler（e）{
让radiusVariable=document.querySelector（':root'）；
设xminus=Number（symbolEle.getAttributeNS（null，'x'）；
设yminus=Number（symbolEle.getAttributeNS（null，'y'）；
设ActualX负=0；
设实际负=0；
如果（xminus！=null）{
实际值x减去=xminus；
}
if（yminus！=null）{
实际负=yminus；
}
设widthRect=rect.getBoundingClientRect（）.width；
设heightRect=rect.getBoundingClientRect（）.height；
设radiusAchieve=Math.sqrt（Math.pow（widthcrect，2）+Math.pow（heightRect，2））；
radiusVariable.style.setProperty（'--radius'，RadiusAcieve）；
让cooractual=getactualcor（svg，e.clientX，e.clientY）；
让initial=symbolle.getElementsByClassName（“ripple”）[0]；
if（首字母）{
初始值。删除（）
}
设circ=document.createElements（'http://www.w3.org/2000/svg","圆圈",；
circ.setAttributeNS（null，'cx'，cooractual.x-实际值x减去）；
circ.setAttributeNS（null，'cy'，coractural.y-实际负）；
circ.style.pointerEvents=“无”；
circ.classList.add（'ripple'）；
circ.style.fill=颜色；
附加儿童符号（circ）；
}
}

使用

涟漪
：根{
--半径：0；
}
.涟漪{
动画：波纹600毫秒线性；
}
@关键帧波纹{
到{
r:var（--半径）；
不透明度：0；
}
}
const svg=document.getElementById（'svg'）；
const rect=document.getElementById（'rec'）；
const rect2=document.getElementById（'rec2'）；
setRipple（svg、rect、document.querySelector（“#ripp”）、“red”）；
setRipple（svg、rect2、document.querySelector（“#ripp2”）、“white”）；
函数setRipple（svg、rect、符号、颜色）{
函数GetActualCor（元素，X，Y）{
设pt=elem.createSVGPoint（）；
pt.x=x；
pt.y=y；
返回pt.matrixTransform（elem.getScreenCTM（）.inverse（））；
}
rect.addEventListener（'click'，clickHandler）；
函数clickHandler（e）{
让radiusVariable=document.querySelector（':root'）；
设xminus=Number（symbolEle.getAttributeNS（null，'x'）；
设yminus=Number（symbolEle.getAttributeNS（null，'y'）；
设ActualX负=0；
设实际负=0；
如果（xminus！=null）{
实际值x减去=xminus；
}
if（yminus！=null）{
实际负=yminus；
}
设widthRect=rect.getBoundingClientRect（）.width；
设heightRect=rect.getBoundingClientRect（）.height；
设radiusAchieve=Math.sqrt（Math.pow（widthcrect，2）+Math.pow（heightRect，2））；
radiusVariable.style.setProperty（'--radius'，RadiusAcieve）；
让cooractual=getactualcor（svg，e.clientX，e.clientY）；
让initial=symbolle.getElementsByClassName（“ripple”）[0]；
if（首字母）{
初始值。删除（）
}
设circ=document.createElements（'http://www.w3.org/2000/svg","圆圈",；
circ.setAttributeNS（null，'cx'，cooractual.x-实际值x减去）；
circ.setAttributeNS（null，'cy'，coractural.y-实际负）；
circ.style.pointerEvents=“无”；
circ.classList.add（'ripple'）；
circ.style.fill=颜色；
附加儿童符号（circ）；
}
}

尝试在rect元素中使用SVG属性rx=“20”ry=“20”而不是border radius（SVG 1.1-YMMV实际上不支持该属性）@Michael border radius仅供试用。主要问题是如何设置符号标记的半径，谢谢。Nikhil-对不起-我不明白您试图实现的行为。“维持”可能有许多不同的含义。请记住，创建use元素时，引用符号中的任何底层属性都不会在DOM中公开。use元素“冻结”所有这些