首页 > 解决方案 > SVG如何在Java中通过翻译和旋转获取变换的绝对坐标

问题描述

目前我正在使用 batik 库进行 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>

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

谢谢

标签: javasvgtransformsvg-filters

解决方案


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 的问题。我不是 Batik 用户,但它应该类似于以下内容:

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);

推荐阅读