2012-02-20 2 views
0

Я пытаюсь изменить файл SVG с помощью jQuery SVG. Я использовал Inkscape, чтобы нарисовать мой SVG-файл, а затем отредактировать, чтобы удалить ненужный код.jQuery SVG Изменение не встраиваемых/встроенных файлов 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 и т. Д.). Любая помощь очень ценится.

ответ

0

Я использую JQuery-SVG с внешними файлами, такими как:
$(...).svg({loadURL:'path/to/my.svg',...});

, а затем позже, как:
var $svg = $(SomeHtmlDOMelement).find('svg');
$svg.children().find('#Hour').attr('transform','rotate(12,50,50)');

Смежные вопросы