2016-05-02 11 views
1

は、これはこれは、SVGにsvg inner idにアクセスしてCSSがそのidの塗りつぶし色を変更する方法を教えてください。

<div> 
    <object id="objsvg" class="svgbtn" type="image/svg+xml" data="next.svg" onclick="changeSVGColor()"></object>  
</div> 

を表示するには、私の基本的なHTMLである私のSVGファイル

next.svg

<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet type="text/css" href="style.css"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 
<g class="next"> 
    <g> 
    <polygon fill="#FFD92D" class="inner" points="20.587,5.055 78.706,48 20.587,90.945"/> 
    <path fill="#FF9900" class="outer" d="M21.623,7.11L76.961,48L21.623,88.89V7.11 M19.55,3v90l60.9-45L19.55,3L19.55,3z"/> 
    </g> 
</g> 
</svg> 

ですこれは私のstyle.cssファイルである

.inner { 
    fill: #000000; 
} 
.inner-new-color { 
    fill: #ff00ff; 
} 

これはsvgファイルの.innerの色を変更するための私の基本的なjQueryです。私は間違って何をしていますか?

$ objsvg。hasClass( "inner"))以降、#objsvgセレクタが内部クラスをまったく持っていないように見えることさえありません。 falseを返します。

function changeSVGColor() { 
    $("#objsvg").removeClass("inner"); 
    $("#objsvg").addClass("inner-new-color"); 
} 
+0

組み込みに私の[SVG液](http://stackoverflow.com/questions/25002310/best-practice-for-using-svg-images/25032941#25032941)をチェックし、そのコーディングを再利用する。その後、SVGの部分を更新し、コードを微調整します。 –

答えて

0

あなたはクラスで変更したい部分を選択し、あなたのコンソールを開きます。 $(".inner")

$(".inner").removeClass("inner").addClass("inner-new-color"); 

Example Fiddle

+0

こんにちは、フィドルのおかげで。 タグの代わりにタグと外部のsvgファイルを使用してこれを行う方法はありますか? svgがインラインのときに ".inner"クラスにアクセスできますが、svgが別のファイルにあるときにはアクセスできません。 – user1729409

+0

私は、外部のsvgファイルからそれを行う方法について完全に肯定的ではありません。別のスレッドから[この回答](http://stackoverflow.com/a/31129363/5774702)をチェックしてください。彼はいくつかのオプションと例へのリンクを提供しています。うまくいけば何かがあなたを助けることができます。 – Hoopson2

+0

助けてくれてありがとう。この答えを受け入れるつもりですが、私はこれを解決するのに最も近いところにいます。 – user1729409

0

IDが親や「オブジェクトの上では動作しません、あなたは崇高なテキストのようなものを使用してSVGを開き、あなたが操作しようとしているものは何でもパスのid="objsvg"を追加する必要があります。

例えば..

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 
<g class="next"> 
    <g> 
    <polygon fill="#FFD92D" class="inner" points="20.587,5.055 78.706,48 20.587,90.945"/> 
    <path id="objsvg" fill="#FF9900" class="outer" d="M21.623,7.11L76.961,48L21.623,88.89V7.11 M19.55,3v90l60.9-45L19.55,3L19.55,3z"/> 
    </g> 
</g> 
</svg> 

がjsの更新を参照してくださいフィドルは、ポップはあまりにも jsfiddle.net/xaLkvc27/12

+0

私はid = "objsvg"をsvgファイルに追加しましたが、$( "#objsvg")。hasClass( "outer"));実行時にfalseを返します。何とかsvg要素にjQueryを使ってアクセスする方法はありますか?この$( "#objsvg")私はオブジェクトにアクセスできると信じていますが、jQueryを使ってオブジェクトの内部にSVGを入れることに興味があります。 – user1729409

+0

もしあなたが間違っていたら、そのIDをあなたのHTMLやSVGのマークアップに追加したことを確認してください。私はjsfiddleを更新しました。これはもう少し明確にする必要があります。https://jsfiddle.net/ xaLkvc27/12/ – chrismillah

+0

こんにちは、あなたのコメントとフィドルのおかげで。 タグを使用してsvgにアクセスしようとしていますが、svgファイルはインラインではなく外部ファイルにあります。 svgファイルが外部ファイルにあるときに ".inner"と ".outer"クラスにアクセスする方法はありますか? – user1729409

関連する問題