jquery - How to convert the SVG g element transform translate value to pixel -
as title. use translate attribute not css. how can convert translate value pixel. here's html code:
<g transform="translate(95,-8)">...</g>
update reason: why need convert pixel? because need web after loading, need css animation animation need follow element coordinate. div
translate need unit need convert group translate specific unit, or anyway can count element width/height when web loading success.
here's element more information:
<g transform="translate(95,-8)"> <pattern class="snodes" id="image2" width="100%" height="100%" style="display: block;"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/1-01.png" id="node_id112" width="20px" height="20px"></image></pattern><circle r="10" class="snodes" id="node_id112" onclick="nodesdowninlv3(112)" fill="url(#image2)" indicator="5-a-04-s03" original-title="" style="display: block;"></circle></g>
update more code:
<svg class="enable" id="svg1" width="100%" height="100%"> <g transform="translate(-10,-11)"> <g transform="translate(817,379)"><pattern class="snodes" id="image2" width="100%" height="100%" style="display: block;"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/1-01.png" id="node_id112" width="20px" height="20px"></image></pattern><circle r="10" class="snodes" id="node_id112" onclick="nodesdowninlv3(112)" fill="url(#image2)" indicator="5-a-04-s03" style="display: block;" original-title=""></circle></g> </g> </svg> <div id="dosomeinfo"></div> //when web loading success show information, information follow svg's group
thanks help.
you can use element.getboundingclientrect()
. yields position of element relative top left corner of viewport. in case structure that:
<div class="container"> <svg> <g transform="…"> … </g> </svg> <div id="someid">…</div> </div>
you can subtract .containers
bounding rect groups bounding rect relative offset group container.
Comments
Post a Comment