如何在点击中心绘制SVG元素？
如何在点击中心绘制SVG元素？
提问于 2022-01-25 12:45:42
用户点击，然后获取坐标(x, y)。我尝试绘制气球svg，而不是单击：
气球有密码：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 88 88" style="enable-background:new 0 0 88 88;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#007dbb;}
</style>
<g id="marker2">
<g>
<g>
<path class="st0" d="M74.8,84.5c-20.1,0-39.9,0-59.7,0c0-27.1,0-54.2,0-81.4c19.9,0,39.8,0,59.7,0C74.8,30.2,74.8,57.3,74.8,84.5
z"/>
</g>
<g>
<g>
<path class="st1" d="M68,31.3c0,11.2-7.6,20.7-17.8,23.5c-2,0.5-4.9,2.2-6.2,8.3c-1.6-6-4.3-7.8-6.3-8.3
C27.5,51.9,20,42.5,20,31.3C20,17.9,30.7,7,44,7C57.3,7,68,17.9,68,31.3z"/>
<path class="st1" d="M44,67c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2.7-6-6S40.7,67,44,67z"/>
</g>
</g>
</g>
</g>
<g id="Layer_1_1_">
</g>
</svg>这是SVG图像。
首先，如何设置这个气球的宽度，高度，以及如何在点击中心(红色突出显示)的平衡点？
我试着像这样设置宽度和高度：
let group = document.getElementById('marker2');
group.setAttribute("width", '30px');
group.setAttribute("height", '30px');但现在它起作用了，当我试图找到一个圆心时：
<path class="st1" d="M44,67c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2.7-6-6S40.7,67,44,67z"/>你能给我解释一下如何在点击中心放置平衡剂吗？
我的想法是获取id="marker2"的矩形发件盒，然后找到中心：
let rectSmallCircle = getRect('st1');
let box = getRect('marker2');
let height = box.height;
let centerWidth = box.width / 2;
let startPositionX = centerWidth;
let startPositionY = height - rectSmallCircle.height / 2;回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-25 13:32:13
摆弄位置
const svg = `<svg viewBox="0 0 88 88"><style>.st0{fill:none;}.st1{fill:#007dbb;}</style><g id="marker2"><path class="st0" d="M74.8,84.5c-20.1,0-39.9,0-59.7,0c0-27.1,0-54.2,0-81.4c19.9,0,39.8,0,59.7,0C74.8,30.2,74.8,57.3,74.8,84.5 z"/><path class="st1" d="M68,31.3c0,11.2-7.6,20.7-17.8,23.5c-2,0.5-4.9,2.2-6.2,8.3c-1.6-6-4.3-7.8-6.3-8.3 C27.5,51.9,20,42.5,20,31.3C20,17.9,30.7,7,44,7C57.3,7,68,17.9,68,31.3z"/><path class="st1" d="M44,67c3.3,0,6,2.7,6,6s-2.7,6-6,6c-3.3,0-6-2.7-6-6S40.7,67,44,67z"/></g></svg>`
const container = document.getElementById("svgContainer");
document.getElementById("lnk").addEventListener("click", function(e) {
e.preventDefault();
container.innerHTML = svg;
const dot = document.querySelectorAll(".st1")[1]
dot.setAttribute('style', 'fill: green');
const bbox = dot.getBBox();
const center = [bbox.x / 2 + bbox.height / 2, bbox.y / 2 + bbox.width / 2]
const clickX = e.clientX,
clickY = e.clientY;
document.getElementById("output").innerHTML = `${clickX},${clickY} - ${center}`
container.style.top = (clickX-100-center[0]+88)+"px"
container.style.left = (clickY-100-88)+"px"
})#svgContainer {
height: 200px;
position:absolute;
}
svg {
height: 200px
}<h1>Test svg</h1>
<p id="output"></p>
<p><br/></p>
<p><br/></p>
<div id="svgContainer"></div>
<p>Click the <a id="lnk" href="#">Link</a></p>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70848872
复制相关文章
相似问题
腾讯云开发者
