0

I am attempting to modify an SVG file with jQuery SVG. I've used Inkscape to draw my SVG file - then edited to remove non-nessesary code.

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>

I thought that all I needed to do was something like this in my Script:

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

I've read that jQuery SVG does not support the latest jQuery, but I have attempted to use 1.4.4 (I'm not sure how far back I should go).

I read this post which talks about a non-official patched version.

I'm okay changing anything (HTML, JavaScript, SVG, etc.). Any help is most appreciated.

Community
  • 1
  • 1
w0lf42
  • 508
  • 6
  • 19

1 Answers1

0

I'm using jQuery-SVG with external files like:
$(...).svg({loadURL:'path/to/my.svg',...});

And then later on like:
var $svg = $(SomeHtmlDOMelement).find('svg');
$svg.children().find('#Hour').attr('transform','rotate(12,50,50)');

Chris
  • 3,265
  • 5
  • 37
  • 50