Reputation: 11
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
Upvotes: 1
Views: 591
Reputation: 758
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.
Upvotes: 1