时间戳

首页 > 解决方案 > 如何将 svg 对象移动到新坐标

d3.js - 如何将 svg 对象移动到新坐标

问题描述

再次向 svg-objects 提出问题。

假设我有两行，按 g-tag 分组：

<g id="a29">
  <line class="hotwater graphic" x1="280" y1="50" x2="550" y2="50" id="g29"></line>
  <line class="hotwater graphic" x1="280" y1="70" x2="550" y2="70" id="g29"></line>
</g>

我通过拖动鼠标并将转换分配给组来移动这些线条，所以我得到了这个：

<g id="a29" transform="translate(10 90)">
  <line class="hotwater graphic" x1="280" y1="50" x2="550" y2="50" id="g29"></line>
  <line class="hotwater graphic" x1="280" y1="70" x2="550" y2="70" id="g29"></line>
</g>

现在我想将线条保存到数据库中，为此，我想将翻译添加到线条的点上。当然，我可以逐点更改，但是如果我有折线或矩形呢？

有没有一种方法可以一步纠正这些定位点，而与 svg 类型无关？也许 d3js 提供了这样的功能？

谢谢卡斯滕

标签： d3.jssvg

解决方案

好的，我现在以“丑陋”的方式做到了，我认为：

var svgGroup = d3.select(ObjectToSave);                     //The grouped Element
var transform = getTranslation(svgGroup.attr('transform')); //Transformation of the Group
var xOrigin = 0;
var yOrigin = 0;
var xDifference = 0;
var yDifference = 0;

if (transform != null && transform != "" && transform != "translate(0)" && Id != null) {
    xDifference = parseInt(transform[0]);
    yDifference = parseInt(transform[1]);
}

for (var i = 0; i < ObjectToSave.childNodes.length; i++) {
  var svgElement = d3.select(ObjectToSave.childNodes[i]);    //inner element

    //If the inner Element has a Transformation, also recognize it:
    if (svgElement.attr('transform')) {
        transform = getTranslation(d3.select(ObjectToSave.firstElementChild).attr('transform'));
        if (logLevel >= 12) console.log("Transform of Element: " + transform[0] + "/" + transform[1]);
        xOrigin = TryParseInt(transform[0]);
        yOrigin = TryParseInt(transform[1]);
    }

    var svgType = svgGroup.node().firstChild.tagName;
    switch (svgType.toLowerCase()) {
        case 'line':
            svgElement
                .attr('x1', (parseInt(svgElement.attr('x1')) + xOrigin + xDifference))
                .attr('y1', (parseInt(svgElement.attr('y1')) + yOrigin + yDifference))
                .attr('x2', (parseInt(svgElement.attr('x2')) + xOrigin + xDifference))
                .attr('y2', (parseInt(svgElement.attr('y2')) + yOrigin + yDifference))
                .attr('transform', null);
            break;
        case 'circle':
        case 'ellipse':
            svgElement
                .attr('cx', (parseInt(svgElement.attr('cx')) + xOrigin + xDifference))
                .attr('cy', (parseInt(svgElement.attr('cy')) + yOrigin + yDifference))
                .attr('transform', null);
            break;
        case 'rect':
            svgElement
                .attr('x', (parseInt(svgElement.attr('x')) + xOrigin + xDifference))
                .attr('y', (parseInt(svgElement.attr('y')) + yOrigin + yDifference))
                .attr('transform', null);
            break;
        case 'polyline':
        case 'polygon':
            var actPoints = svgElement.attr('points').split(",");
            for (var c = 0; c < actPoints.length; c+=2) {
                actPoints[c] = actPoints[c] - 0 + xOrigin + xDifference;
                actPoints[c+1] = actPoints[c+1] - 0 + yOrigin + yDifference;
            }
            svgElement.attr('points', actPoints)
            .attr('transform', null);
            break;
    }
    svgString += svgElement.node().outerHTML.replace(' xmlns="http://www.w3.org/2000/svg"', "");
}
//Now ready to save to database.

..也许有更好的方法，当然我必须对此进行测试，但实际上它有效。

推荐阅读