0

我正在尝试使用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（我不确定我应该走多远）。

我读了这篇关于非官方补丁版本的帖子。

我可以更改任何内容（HTML、JavaScript、SVG 等）。非常感谢任何帮助。

4

1 回答 1

0

我将 jQuery-SVG 与外部文件一起使用，例如：
$(...).svg({loadURL:'path/to/my.svg',...});

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

于 2012-05-17T14:23:00.050 回答