Question

我正在尝试使用jQuery SVG修改SVG文件。我使用Inkscape绘制我的SVG文件 - 然后进行编辑以删除非必要的代码。

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <style type="text/css">@import "jquery.svg.css";</style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.svg.js"></script>
        <script type="text/javascript" src="jquery.svgdom.js"></script>
    </head>
    <body>
        <div id="svgContainter">
            <object type="image/svg+xml" data="logo.13.svg"></object>
        </div>
    </body>
</html>

SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   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"
   width="314"
   height="272"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="logo.13.svg">
  <g
     inkscape:groupmode="layer"
     id="layer12"
     inkscape:label="GS Outline S"
     style="display:inline">
    <path
       style="fill:#fecf29;fill-opacity:0.39215686;stroke:#fecf29;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.58823529"
       d="m 221.44046,109.42518 -9.20578,5.31496 -3.0686,-5.31496 -30.68594,0 -9.20578,15.94488 3.06859,5.31496 49.09751,0 9.20578,15.94488 -15.34297,26.5748 -42.96032,0 -6.13718,-10.62992 9.20578,-5.31496 3.06859,5.31496 30.68594,0 9.20578,-15.94488 -3.06859,-5.31496 -49.0975,0 -9.2058,-15.94488 15.34298,-26.574795 42.96032,0 z"
       id="path4425"
       inkscape:connector-curvature="0" />
  </g>
</svg>

我认为我需要做的就是在我的剧本中这样的事情：

$("#path4425", svg.root()).attr('fill', "rgb(0,0,0)");

我已经读过jQuery SVG不支持最新的jQuery，但我试图使用1.4.4（我不知道应该走多远）。

我读了this post，其中谈到了non-official patched version。

我可以改变任何东西（HTML，JavaScript，SVG等）。非常感谢任何帮助。

Answer 1

我正在使用jQuery-SVG和外部文件，如：
$(...).svg({loadURL:'path/to/my.svg',...});

然后再说：
var $svg = $(SomeHtmlDOMelement).find('svg'); $svg.children().find('#Hour').attr('transform','rotate(12,50,50)');

jQuery SVG修改非嵌入/内联SVG文件

1 个答案: