Question

目前，我正在使用蜡染库进行SVG操作。以下是我的元素：

<g id="FrontRight_1">
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M335.775,3550.251l886.631,198.611
    c0,0-17.461-467.823-190.26-756.729c-172.794-288.907-243.793-385.207-281.208-529.649
    c-37.417-144.446-65.087-385.58-29.396-544.164l-431.396-161.81c0,0-100.354,225.707-99.356,607.059
    c0.598,228.37,83.309,362.999,112.561,620.65C323.833,3164.645,338.045,3532.962,335.775,3550.251z"/>

其原始坐标为：190.7826,1756.51

转换后的功能如下：

<g id="FrontRight_1" transform="translate(-1751.828610 1227.40240) rotate(270.0)"> <path d="M335.775 3550.251 L1222.406 3748.862 L1222.406 3748.862 L1204.945 3281.039 L1032.146 2992.1329 L859.352 2703.226 L788.3529 2606.926 L750.938 2462.4841 L713.521 2318.038 L685.851 2076.904 L721.542 1918.3201 L290.146 1756.51 L290.146 1756.51 L189.7919 1982.217 L190.79 2363.569 L191.388 2591.939 L274.099 2726.568 L303.3509 2984.2192 L323.833 3164.645 L338.045 3532.962 L335.775 3550.251 Z" fill="#8498d1" stroke="#010101" stroke-width="1" /> </g>

需要知道以上元素的新绝对坐标

谢谢

Answer 1

Batik支持SVG DOM，因此方法应与下面的Javascript示例相同。

var g   = document.getElementById("FrontRight_1");
var svg = g.ownerSVGElement;

var pt = svg.createSVGPoint();
pt.x = 190.7826;
pt.y = 1756.51;

var groupTransformMatrix = g.transform.baseVal.consolidate().matrix;

pt = pt.matrixTransform(groupTransformMatrix);
console.log("pt=",pt);

<svg>
  <g id="FrontRight_1" transform="translate(-1751.828610 1227.40240) rotate(270.0)">
  </g>
</svg>

这仅仅是将代码移植到Java的问题。我不是蜡染用户，但是应该是以下内容：

SVGDocument   document = canvas.getSVGDocument();
SVGGElement   g        = (SVGGElement) document.getElementById("FrontRight_1");
SVGSVGElement svg      = g.getOwnerSVGElement();

SVGPoint pt = svg.createSVGPoint();
pt.setX(190.7826f);
pt.setY(1756.51f);

SVGMatrix groupTransformMatrix = g.getTransform().getBaseVal().consolidate().getMatrix();

pt = pt.matrixTransform(groupTransformMatrix);

SVG如何在Java中使用平移和旋转获取绝对坐标以进行变换

1 个答案: