使用Javascript缩放svg路径
Radonirina Maminiaina
我有这个小提琴。
当我单击路径时，我要对其进行缩放。但是在缩放之后，单击的路径失去了他的当前位置。
这是我的jQuery代码：
var svg = $("#svg-container");
svg.load("svg/fondcarte-collec_actuelle.svg", function(data) {
svg.children().find("path").click(function(e) {
$("#Layer_1 path").removeAttr("style");
var x = e.pageX - svg.width() - $(this).offset().left - this.getBoundingClientRect().width + svg.find("svg").offset().left + 250;
var y = e.pageY - svg.height() - $(this).offset().top - this.getBoundingClientRect().height + svg.find("svg").offset().top + 250;
console.log(this.x, this.y)
$(this).css("transform", "translate(" + x + "px, " + y + "px) scale(1.3)");
$(this).css("fill", "green");
})
})
- 如何缩放而不丢失当前位置？
- 谁能给一个带有svg教程和操作的网站？
我想要如下图所示的结果： 
如何做呢？
注意：我问它是否没有插件，因为我想了解这个缩放概念。
保罗·勒博
MortenMuulder的解决方案就在那里。但是，这还不是全部解决方案。
将百分比值transform:orgin应用于SVG元素时，目前存在工作方式问题。Chrome和Firefox彼此不一致。从技术上讲，Firefox是遵循当前规范的一种。您可以在有关该主题的其他SO问题中阅读有关此内容的更多信息。
要解决此问题，您需要自己计算区域的中心。您可以通过调用getBBox()元素来做到这一点。这将返回元素的位置，宽度和高度。
var bbox = this.getBBox();
var centreX = bbox.x + bbox.width/2;
var centreY = bbox.y + bbox.height/2;
您需要做的另一件事是将当前区域移到所有其他区域的前面。为此，您需要移动它，使其成为最后一个元素。我们可以这样做：
this.parentElement.appendChild(this);
我们获取父元素，并将当前元素附加到其子元素的末尾。这具有移动它的效果。
因此，最终点击处理程序将如下所示：
svg.children().find("path").click(function(e) {
$("#Layer_1 path").removeAttr("style");
$this = $(this);
var bbox = this.getBBox();
var centreX = bbox.x + bbox.width/2;
var centreY = bbox.y + bbox.height/2;
$this.css("transform-origin", centreX + 'px ' + centreY + 'px');
$this.css("transform", "scale(2)");
$this.css("stroke", "white");
$this.css("fill", "green");
this.parentElement.appendChild(this);
})
更新2020
Firefox和Chrome行为不同的问题现已解决。CSS组添加了一个新的CSS属性transform-box，该属性允许您指定百分比transform-origin的计算方式。
现在，通过将设置transform-box为，可以在所有浏览器中重现Chrome基于元素边界框计算百分比的旧的（错误的）行为fill-box。这稍微简化了代码。
$this.css("transform-origin", "50% 50%");
$this.css("transform-box", "fill-box");
$this.css("transform", "scale(2)");
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用 Javascript 缩放以适应 HTML 中减少的 SVG 路径
- 2
使用Inkscape缩放SVG
- 3
仅使用Javascript / jQuery的动态SVG路径
- 4
使用JavaScript获取点击的SVG路径的ID
- 5
使用 javascript（形状变形）创建 svg 路径
- 6
使用 Javascript 动态添加时，SVG 元素无法正确缩放
- 7
SVG缩放和剪切路径
- 8
使用背景图像填充SVG路径元素，而无需平铺或缩放
- 9
缩放到使用D3外部加载SVG边界路径箱
- 10
SVG 将路径的填充模式缩放到路径大小
- 11
CSS使用flexbox缩放svg
- 12
缩放加载的SVG并使用快照SVG放大
- 13
缩放加载的SVG并使用快照SVG放大
- 14
使用JavaScript从任意SVG路径提取x，y坐标
- 15
使用Javascript获取SVG路径的绝对坐标
- 16
使用Javascript按固定的垂直距离创建SVG路径
- 17
如何使用jQuery / JavaScript为SVG路径设置动画？
- 18
使用JavaScript缩放页面
- 19
如何获得SVG路径形状以缩放D3？
- 20
SVG-重复从中心缩放的路径（脉动）
- 21
缩放时如何保留SVG剪辑路径的长宽比
- 22
SVG-重复从中心缩放的路径（脉动）
- 23
在javascript中简化SVG路径
- 24
如何使用 JavaScript 使 SVG 缩放到父容器的全高和全宽？
- 25
使用CSS缩放所有svg元素
- 26
使用父容器进行SVG缩放
- 27
使用文本缩放 svg 以适合 viewBox
- 28
使用 css 动画从中心缩放 svg
- 29
通过javascript的SVG文本路径未绘制
我来说两句