web-dev-qa-db-ja.com

jQueryを使用してSVGファイルを変更する

いくつかの形とテキストを含むsvgファイルがあります。実行時にsvgを変更して、形状によって色を変更したり、テキストによって内容を変更したりしたいと思います。

外部svgファイルに2つの要素しかないとしましょう：

  1. circle1：そのidを持つ青い塗りつぶされた円

  2. text1：そのIDの「-」を含むテキスト

これで、htmlでファイルを表示できます

<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>

画像の近くのボタンから、jQueryを使用して、onClickイベントをキャッチできます。cicleを赤で塗りつぶし、テキストを「hello Word」に変更します。

どうやってやるの？ jQueryベースのソリューションはありますか？

私はjquery.svgプラグインを見つけましたが、ランタイムで作成されたドキュメントしか変更できないようです。

ありがとう。

jquerysvg
17
Redax

できた！

最後に、jQuery.svgに関するドキュメントを見つけました。とSVG自体に。

コードから始めましょう：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript" src="../js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.svg/jquery.svg.js"></script> 
</head>
<body>

<script type="text/javascript">

$(document).ready(function() 
    {
    $("#svgload").svg({
        onLoad: function()
            {
            var svg = $("#svgload").svg('get');
            svg.load('Red1.svg', {addTo: true,  changeSize: false});        
            },
        settings: {}}
        );  


    $('#btnTest').click(function(e)
        {
        var rect = $('#idRect1');
        rect.css('fill','green');
        //rect.attrib('fill','green');

        var txt = $('#idText1');
        txt.text('FF');
     });    

    });
</Script>   

<div id="svgload" style="width: 100%; height: 300px;"></div>

<div id="btnTest">
Click Me!
</div>

</body>
</html>

そして、このサンプルRed1.svgファイル：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

<rect id="idRect1" fill="#FF0000" width="300" height="300"/> 
<text id="idText1" x="20" y="20" font-family="sans-serif" font-size="20px" fill="black">Hello!</text>

</svg>

JQueryを使用して、実行時に外部Red1.svgをロードしました。 btnTestをクリックして、テキストと塗りつぶしの色を設定します。

私の研究で私はそれを発見しました：

  1. JQuery.svgを使用すると、SVGファイルの要素と標準のhtmlタグにアクセスできます

  2. SVGでは、塗りつぶしの色を設定する方法を選択できます

    2a。スタイルで

        rect.css('fill','green');

    2b。特定のタグ付き

        rect.attr('fill','green');

したがって、svgを生成したプログラムに応じてコードを変更する必要があります。

ごきげんよう。

14
Redax

ええと、jQueryまたはその他のJavaScriptで使用できるFANTASTICライブラリがあります。

ラファエルJS： http://raphaeljs.com/

サンプルを確認してください。ほとんど何でもできます。

2
Milimetric

私は svgweb を使用して、JavaScriptを使用してSVGを表示し、プログラムで操作します。 Flashを使用してSVGをIE6 +に移植するため、そしてきちんとしたSVGロード機能を提供するため、私はそれを使用しています。

私はjQueryをとても使いたいので、svgwebで動作するようにパッチを当てました。私はキース・ウッズのスクリプトを例として使用しました。キースのコードは、jQueryの最新バージョンをサポートしていません。

パッチは次のとおりです。 jquery.svgweb-and-svgdom-patch svgweb contribで適切なホームを提供することを意味してきましたが、まだ慣れていません。それはキースのパッチに基づいていますが、いくつかの更新があります。知っておくべきことの1つは、IEの場合、jQueryがロードされる前に、次のコードをスクリプトに挿入する必要があることです。

document.querySelectorAll = null;

JQueryが読み込まれた後でこれを行うだけでは十分ではないため、サーバー側のブラウザー検出を使用して挿入するか、jQueryの前のスクリプトでクライアント側のブラウザー検出を使用する必要があります。

結局のところ...次のようなことができます：

$('#mycirc').attr('fill', 'Red');
1
Josh Pearce

http://irunmywebsite.com/raphael/additionalhelp.php?q=path 上記は私のサイトでのインタラクティブな例の1つであり、ラファエルの犬は正確だと思いましたが、最低限のものです。著者は自己探求を奨励すると思います

私はipoddingをしているので、英語がおかしくなりました。

0
Chasbeen