我的问题是基于this brilliant aswer。我听从了建议并将其应用于我的测试用例。我仍然看不到中风。我希望中风始终可见。
//------------------------1.CREATE SVG------------------------//
//namespace
const svgns = 'http://www.w3.org/2000/svg';
//define dimension
const width = 1280;
const height = 600;
const svg = d3.create('svg')
.attr('xmlns', svgns)
.attr('viewBox', `0 0 ${width} ${height}`)
.attr('color-interpolation-filters', 'sRGB');
d3.select('body').append(() => svg.node());
//------------------------2.CREATE FILTER------------------------//
const def = svg.append('def')
.append('filter')
.attr('id', 'filt');
//dynamic filter creation
const filtData = [
{ "filtName": "feFlood", "x": "0%", "y": "0%", "width": "100%", "height": "100%", "flood-color": "black", "flood-opacity": "1", "result": "stroke-content" },
{ "filtName": "feColorMatrix", "in": "SourceGraphic", "result": "stroke-clip", "type": "matrix", "values": "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 -1 1 0" },
{ "filtName": "feComposite", "operator": "in", "in": "stroke-content", "in2": "stroke-clip", "result": "just-stroke" },
{ "filtName": "feColorMatrix", "in": "SourceGraphic", "result": "fill-clip", "type": "matrix", "values": "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -1 0 0 1 0" },
{ "filtName": "feTurbulence", "type": "fractalNoise", "numOctaves": "3", "baseFrequency": "0.1" },
{ "filtName": "feComposite", "operator": "over", "in": "just-stroke" }
];
filtData.forEach((a, i) => {
def.append(`${a.filtName.toString()}`)
});
const el = d3.selectAll('def>filter')._groups[0][0].children
const len = el.length;
for (let i = 0; i < len; i++) {
const selection = d3.select(el[i]);
const keys = Object.keys(filtData[i]).slice(1);
const subLen = keys.length;
for (let j = 0; j < subLen; j++) {
const attr = keys[j];
const val = filtData[i][`${attr}`]
selection.attr(`${attr}`, `${val}`);
}
};
//------------------------3.CREATE ELEMENTS------------------------//
//background rect
const bg = svg.append('rect')
.attr('x', '0')
.attr('y', '0')
.attr('width', `${width}`)
.attr('height', `${height}`)
.attr('fill', `#EFEFEF`);
const geometryDim = { "width": 400, "height": 400 };
//main elementRect
const rect = svg.append('rect')
.attr('class','elementRect')
.attr('x', `${width/2-geometryDim.width/2}`)
.attr('y', `${height/2-geometryDim.height/2}`)
.attr('width', `400`)
.attr('height', `400`)
.attr('stroke', 'black')
.attr('fill', 'green');
const rectDim = {
"x": rect.node().x.baseVal.value,
"y": rect.node().y.baseVal.value,
"height": rect.node().height.baseVal.value,
"width": rect.node().width.baseVal.value,
"centerX": rect.node().x.baseVal.value + rect.node().width.baseVal.value / 2,
"centerY": rect.node().y.baseVal.value + rect.node().height.baseVal.value / 2
}
const circRadius = Math.sqrt(
Math.pow(
(rectDim.x - rectDim.centerX), 2) +
Math.pow((rectDim.y - rectDim.centerY), 2)
);
//build a circle circumscribed around <rect> and animate the radius
const mask = svg
.append('mask')
.attr('id', 'mask')
.append('circle')
.attr('cx', `${rectDim.centerX}`)
.attr('cy', `${rectDim.centerY}`)
.attr('fill', 'white')
.attr('filter', 'url(#filt)')
.attr('r', '0')
.transition()
.duration(7000)
.ease(d3.easeLinear)
.attr('r', `${circRadius+10}`);
const rectTwo = rect.clone();
rect.remove();
rectTwo.raise().attr('mask', 'url(#mask)');<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
</body>
<script src="min3.js">
</script>
</html>