Keith Wood'sのjQuery SVGプラグインで外部読み込みSVGをアニメーション化する

Question

Keith Woodのpluginを使用して外部SVGからロードされたパスグループの塗りつぶしカラーをアニメートしようとしています。

まずはDIV容器にSVGをインポート：

$(document).ready(function() { 
$('#header-main').svg({loadURL: 'header.svg'}); 
var svg = $('#header-main').svg('get'); 

}）。

SVGファイルは次のようになります。私はこのようなパスをアニメーション化しようとすると、今

svg.style('#group1 {fill: black}'); 

：

<svg> 
    <g id="group1"> 
    <path d="M0,22.943V0.223h1.413v22.721H0z"/> 
    <path etc../> 
    </g> 
</svg> 

私はグループまたはそのような個々のパスの塗りつぶしの色を変更することができます：

$('path').animate({svgFill: 'blue'}, 500); 

または$（ '＃1 GROUP1'）アニメーション（{svgFill： '青'}、500）。

などの他のセレクタでは、パスのIDなど何も起こりません。 しかし、私は、パスを作成し、このようにそれをアニメーション化した場合：

var path1 = svg.createPath(); 
svg.path(path1.move(50, 90).curveC(0, 90, 0, 30, 50, 30). 
    line(150, 30).curveC(200, 30, 200, 90, 150, 90).close(), 
    {fill: 'none', stroke: '#D90000', strokeWidth: 10}); 
$('path').animate({svgFill: 'blue'}, 500); 

私はアニメーション化を作成したパスを、しかしheader.svgファイルからインポートされた他のパスは何もしません。

私はここで何か間違っているのですか、プラグインは外部のSVGをアニメーション化できませんか？

Answer 1

私は、同じこと... 2つの異なる方法...下のコードの先頭に..あなたはシンプルなCSSのホバータグ（それは、少なくとも単純なもののために働く）が表示されます....そして私も得ることができましたストロークと塗りつぶし色などを介して、9ヤード全体...しかし、ファイアウォール3.6ではない、ugh。

正直なところ、私はjQuery SVG 1.4.3でDOMに正しくSVGを入れることはできません。私は、それが間違っていることは気にしません。あなたがxmlns：xlink名前空間のリンクを含める必要があるかのように思えますし、xlinkを使用する必要があります。変換を...またはあなたはそのものを吹き飛ばすことができますし、ちょうどCSSを介してそれを行う...

SVGは、クラスタf ** kであり、開発w /ベクトルを作っているそれはとても涼しいかもしれませんが、非常にハードな要素！みんなSafariやChromeを持っていないのは残念ですね。

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<style>  
    g #front {fill:white; fill-opacity:.9; stroke-dasharray:none; stroke-dashoffset:0} 
    g:hover #front {fill: red; fill-opacity:.5; stroke-dasharray:30,20;} 
    g #back {fill:white;fill-opacity:.8; stroke-dashoffset:0;} 
    g:hover #back {stroke-dasharray:30,20; stroke-dashoffset:20; fill: grey; } 
</style> 
<g id="folderIcon" transform="translate(-15.1,-40.1)"> 
<g id="sides" transform="translate(-173,-364)"> 
<path d="m 198,406 0,9 -8,0 0,92 122,0 0,-92 -86,0 0,-9 -28,0 z" id="back" style="stroke:black;stroke-width:3.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;" /> 
<rect height="84.7" id="front" style="stroke:black; stroke-width:3.608; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:4; stroke-opacity:1;" transform="matrix(1,0,-0.397,0.918,0,0)" width="122" x="410" y="468" /> 
</g> 
</g> 
<animate xlink:href="#front" 
    attributeName="fill" 
    attributeType="CSS" 
    from="#ff0" to="#00f" dur="10s" fill="freeze" /> 
<animate xlink:href="#back" 
    attributeName="stroke" 
    attributeType="CSS" 
    from="#88ff88" 
     to="#880088" 
    dur="10s" 
    fill="freeze" /> 
</svg> 

PS：あなたはインラインまたはそのフランス人のjQのプラグインとの「リンク」SVGの作業を取得するために（私が試した）あなたの元の質問に投稿されたていたもの以外の任意のヒントを持っている場合... any help would be appreciated.。

Answer 2

ロードされたSVGの要素またはグループの塗りつぶし色を絶対にアニメーション表示できます。この例では、 "blue.svg"は単一の長方形です。

落とし穴：

• あなたはFF4 +またはChromeを使用しなければならないと私はオペラやSafariを試していません。
• すべてのアニメーションがグループでサポートされているわけではなく、AFAIKはKeith Woodのjquery拡張機能のすべての アニメーションがFFで動作するわけではありません。いくつか アニメーションはCSSで行うことができます。
• 個々の矩形 要素がアニメーション化されているため、「svgblue」または「svgbox」ではなく「rect2816」です。これはsvg全体ではありません。 "＃rect2816" "#svgbox"
• jquery svgを使用しているときに "svgFill"が "fill"されていないことを確認してください。

  <script type="text/javascript" src="js/jquery.js"></script> 
  <script type="text/javascript" src="js/jquery.svg.js"></script> 
  <script type="text/javascript" src="js/jquery.svganim.js" ></script> 
  

  SVGをロードします：

  SVGs
これらのライブラリは

ロードを作成するための拡張

使用Inkscapeの

コードは、塗りつぶしを変更するには、2つの方法を示し、四角形をアニメーション化する：

function main(){ 

$('#svgblue').mouseover(function(){ 
    $('#rect2816').animate({ svgFill: red },2000); 
}); 
    $('#svgblue').mouseout(function(){ 
$('#rect2816').css("fill", blue); 
    }); 
} 

ノート・私のボックスに繰り返さマウスオーバーアニメーションが指定された2秒を取らないので、私はと間違って何かをすることができますマウスオーバー。

Answer 3

私が見ていることから、svgFillアニメーションは 'fill'属性をアニメーション化します。少しのテストでは、CSSの 'fill'プロパティは常にSVGの 'fill'属性の値をオーバーライドしています。私はそれが意図された行動だと思います。

私は同様にグループ又は個々のパスの塗りつぶしの色を変更することができる：

svg.style（ '＃1 GROUP1を{埋める：黒}'）。今

私はこのようなパスアニメーションしようとする：

$（ 'パス'）アニメーション（{svgFill： '青'}、500）。

YoureのCSSの初期値を設定し、属性をアニメーション化しようとしています。あなたが知ったように、それは動作しません。少なくとも私のファイヤーフォックスではない。

解決策の1つは、属性をアニメートしないで、CSSのfillプロパティをアニメートすることです。あなたはjqueryの色必要があります色をアニメーション化するために：https://github.com/jquery/jquery-color

プロパティを埋めるCSSをアニメーション化することができるようにするには、であることをフックする必要があります：

jQuery.Color.hook("fill"); 

*

-pike