我有一个已应用变换的 SVG 元素(这可以是单个变换,也可以是多个变换的组合)。我正在尝试对其应用额外的变换。问题是这个变换可以重复应用,并且需要与现有的变换状态堆叠(因此在末尾附加额外的变换是不切实际的)。浏览 d3 API,我没有注意到任何可以让我应用相对变换的东西(尽管我必须承认,我对 d3 的高级功能不太熟悉)。手动解析当前变换字符串,然后计算 SVG 已经在幕后免费执行的相同变换矩阵似乎很愚蠢,有更好的方法吗?
例如,如果现有元素已具有以下属性:
transform="translate(30) rotate(45 50 50)"
我调用此转换逻辑两次,希望每次在每个维度上将元素偏移 1 个像素,我需要解析和处理平移和旋转调用,因为新平移无法在旋转之前应用。
我实际上一直在想应该有一个特殊的函数来实现这一点,类似于classed()
函数处理添加和删除某些类,而不会弄乱其他类。
但是,在此之前,只需访问现有属性,然后连接字符串即可:
selection.attr("transform", function(d){
return this.getAttribute("transform") +
" translate(30) rotate(45 50 50)";
});
你也可以使用d3.select(this).attr("transform")
但原始的 javascript 应该可以工作并保存函数调用。
请注意不要将属性转换与样式转换混淆。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)