1

请帮我！我用inkscape创建了一些形状并将其保存为SVG，我创建的路径我给了它们ID。现在我已经将SVG文件与我的html链接起来，我知道想用jQuery访问这些路径（id = path123）和开始使用 jQuery 进行编辑和操作。

我的职责是当我将鼠标悬停在其中一条路径上时，它会显示带有一些信息的工具提示。

我试着放一个

PS。我用谷歌搜索并找到了其他使用 jquery 编辑 svg 的示例，但无法找到如何使用从 inkscape 创建的这个文件。

这是我用inkscape创建的svg文件代码

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

谢谢阿尼

4

1 回答 1

1

在 javascript 中创建一个 SVG 路径对象，如下所示：

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

我将您的第一个路径定义复制到 javascript 中。这是你想要达到的目标吗？您还可以创建一个 SVG 对象来操作整个定义。

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

让我更多地了解您的需求，我会尽力提供帮助。

于 2013-01-02T23:49:52.720 回答