1

Please help me! i have created with inkscape some shapes and save it as SVG, the paths that i have created i gave them IDs.Now i have linked the SVG file with my html and i know want to access those paths (id=path123) with jQuery and start to edit and manipulate with jQuery.

my duty is when i hover on one of these paths it shows a tool tip with some information.

i have tryed to put a

PS. I have googled and found others examples editing svg with jquery but cant find how to do it work with this file created from inkscape.

this is the svg file code that i created with inkscape

   <svg    xmlns:dc="http://purl.org/dc/elements/1.1/"       xmlns:cc="http://creativecommons.org/ns#"       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"       xmlns:svg="http://www.w3.org/2000/svg"       xmlns="http://www.w3.org/2000/svg"       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"      xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"       id="svg2"    version="1.1"    inkscape:version="0.48.3.1 r9886"       width="700"    height="700"       sodipodi:docname="dresden_stadtplan.svg">
<metadata
id="metadata8">    <rdf:RDF>
 <cc:Work
    rdf:about="">
   <dc:format>image/svg+xml</dc:format>
   <dc:type
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
   <dc:title />
 </cc:Work>    </rdf:RDF>   </metadata>   <defs
id="defs6" />   <sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="837"
id="namedview4"
showgrid="false"
inkscape:zoom="5.8914897"
inkscape:cx="463.20516"
inkscape:cy="383.84894"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />


   <path

style="fill:#ff0000;fill-opacity:1"
d="m 111.31017,341.21991 c -2.83068,-4.51496 -26.313691,-48.71085 -25.978291,-48.89209 0.17497,-0.0946 2.27309,-1.611 4.66248,-3.36987 3.77122,-2.77606 4.34435,-3.81327 4.34435,-7.86208 0,-3.61043 0.76503,-5.42916 3.38636,-8.05049 3.926741,-3.92674 5.434611,-4.11447 11.151301,-1.38837 4.05342,1.93294 4.32884,1.918 8.45895,-0.45899 l 4.26911,-2.45699 3.97763,5.96183 c 2.18769,3.27901 8.85887,14.02037 14.82484,23.86969 l 10.84721,17.90786 -4.5704,4.34874 c -3.52029,3.34955    -4.75046,5.5494 -5.35404,9.57432 -0.54601,3.64109 -1.68911,5.93783 -3.7699,7.57459 -3.43812,2.70442 -5.12529,2.86927 -10.28197,1.00458 -3.29965,-1.19317 -4.31422,-0.99497 -9.01815,1.76172 l -5.30022,3.10614 -1.64926,-2.63059 0,0 z"
id="path5874"
inkscape:connector-curvature="0"

   />    <path
style="fill:#ff0000;fill-opacity:1"
d="m 136.9525,224.92803 c -4.64104,-6.78303 -9.17039,-13.69944 -10.06522,-15.36982 -0.89482,-1.67037 -2.19813,-3.42005 -2.89623,-3.88817 -0.6981,-0.46812 -0.86489,-0.85911 -0.37065,-0.86887 0.49424,-0.01 0.0386,-1.68092 -1.01263,-3.71369 -1.849,-3.57558 -1.82507,-3.76573 0.73484,-5.83862 1.45535,-1.17847 3.47319,-2.60554 4.48408,-3.17126 1.54134,-0.86258 1.62065,-1.60438 0.4914,-4.59612 -1.31441,-3.48227 -1.2229,-3.64001 3.82934,-6.60082 l 5.17594,-3.0333 2.69869,2.53528 c 2.57971,2.42352 2.88973,2.45546 7.03221,0.72462 2.38345,-0.99587 4.76297,-1.81067 5.28783,-1.81067 0.52486,0 4.34695,5.08289 8.49353,11.29531 4.14658,6.21241 9.06194,12.95014 10.92302,14.97273 1.86109,2.02259 3.73484,5.54867 4.16389,7.83573 0.69843,3.72296 0.22206,4.8835 -4.55039,11.08565 -6.26075,8.13632 -7.42181,8.86945 -15.72257,9.92774 -3.45536,0.44053 -7.17715,1.26134 -8.27065,1.82401 -1.64414,0.84601 -3.44832,-1.11101 -10.42643,-11.30973 l 0,0 z"
id="path5876"
inkscape:connector-curvature="0" />   <path
style="fill:#ff0000;fill-opacity:1"
d="m 352.56153,48.087185 c -4.56513,-3.553516 -3.4166,-11.596461 1.9471,-13.63575 4.3333,-1.647519 12.4108,2.836523 11.4099,6.333936 -2.0237,7.071358 -8.8553,10.805959 -13.357,7.301814 z"
id="path5878"
inkscape:connector-curvature="0" />   <path
style="fill:#ff0000;fill-opacity:1"
d="m 359.63348,385.80737 c -1.5929,-1.04299 -4.0692,-2.93115 -5.5028,-4.1959 -1.4626,-1.29025 -2.6066,-1.70243 -2.6066,-0.9391 0,0.74823 -0.4648,1.36043 -1.0329,1.36043 -1.683,0 -2.4824,-5.17834    -1.691,-10.95275 0.6552,-4.77978 1.2379,-5.64302 5.1606,-7.64419 2.432,-1.24076 5.2247,-2.25593 6.2058,-2.25593 0.9812,0 1.7839,-0.52132 1.7839,-1.15849 0,-2.33186 4.3677,-1.05787 9.9292,2.89623 3.1367,2.2301 6.3564,4.05473 7.1549,4.05473 1.975,0 1.8324,3.68793 -0.2491,6.43991 -0.9355,1.23683 -1.7175,3.39099 -1.7377,4.78702 -0.02,1.39603 -0.5667,2.86569 -1.2143,3.2659 -0.6475,0.40022 -0.8774,1.21297 -0.5108,1.80611 0.3665,0.59315 -0.8286,1.07844 -2.656,1.07844 -1.8273,0 -4.3343,0.76541 -5.5712,1.7009 -2.833,2.14283 -3.8693,2.10904 -7.462,-0.24331 z"
id="path5894"
inkscape:connector-curvature="0" />   <path
style="fill:#ff0000;fill-opacity:1"
d="m 444.96169,340.10887 c -3.8258,-2.93457 -6.9799,-5.40725 -7.00909,-5.49484 -0.0292,-0.0876 4.62863,-3.54441 10.35073,-7.68181 5.7221,-4.1374 11.30905,-8.20284 12.41545,-9.03431 1.54897,-1.16406 2.07932,-1.47829 2.30589,-1.36622 0.16184,0.08 3.05442,2.3988 6.42795,5.15277 5.7798,4.71832 6.11684,5.02377 5.84146,5.29402 -0.41909,0.41127 -23.18963,18.46278 -23.29152,18.46452 -0.0467,8.5e-4 -3.21507,-2.39956 -7.04087,-5.33413 z"
id="path3012"
inkscape:connector-curvature="0"/>




   </svg>

thank you ani

1 Answer 1

1

Create an SVG path object in javascript like this:

var pathdata = 'm 111.31017,341.21991 c -2.83068,-4.51496 -26.313691,-48.71085 -25.978291,-48.89209 0.17497,-0.0946 2.27309,-1.611 4.66248,-3.36987 3.77122,-2.77606 4.34435,-3.81327 4.34435,-7.86208 0,-3.61043 0.76503,-5.42916 3.38636,-8.05049 3.926741,-3.92674 5.434611,-4.11447 11.151301,-1.38837 4.05342,1.93294 4.32884,1.918 8.45895,-0.45899 l 4.26911,-2.45699 3.97763,5.96183 c 2.18769,3.27901 8.85887,14.02037 14.82484,23.86969 l 10.84721,17.90786 -4.5704,4.34874 c -3.52029,3.34955    -4.75046,5.5494 -5.35404,9.57432 -0.54601,3.64109 -1.68911,5.93783 -3.7699,7.57459 -3.43812,2.70442 -5.12529,2.86927 -10.28197,1.00458 -3.29965,-1.19317 -4.31422,-0.99497 -9.01815,1.76172 l -5.30022,3.10614 -1.64926,-2.63059 0,0 z'
var svgpath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
svgpath.setAttribute('d', pathdata);

I copied your first path definition into the javascript. Is this what you are trying to achieve? You can also create an SVG object to manipulate the whole definition.

var svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

Let me know more about your needs and I'll try and help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.