2

私はcircle.svgファイルを持っています

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="48" height="48">
  <circle class="circle" cx="24" cy="24" r="24"></circle>
</svg>

そしてHTMLファイル

...
<div class="bullet blue">
  ...
</div>
<div class="bullet red">
  ...
</div>
<style>
.bullet:before {
  content: url(circle.svg);
}
.bullet.blue:before {
  .circle {
    fill: #0000FF;
  }
}
.bullet.red:before {
  .circle {
    fill: #FF0000;
  }
}
</style>

スタイルシートで円を塗りつぶしたいのですが、うまくいきません。ただし、svg コードを HTML に埋め込むと、スタイル シートが有効になりますが、HTML コードに余分なリソースを挿入したくありません。CSS経由でそれを行う方法はありますか？そうでない場合は、JavaScript を使用してみてはどうでしょうか。

4

2 に答える 2

3

スタイルはドキュメント全体に適用されず、そこにある SVG と HTML は別々のドキュメントです。

<object>2つまたはタグを介して円を埋め込んだ場合<iframe>、SVG DOMにアクセスして操作できるため、必要なことを実行できます。

var svgDoc = document.getElementById("objectId1").contentDocument;
var style = svgDoc.createElementNS("http://www.w3.org/2000/svg". "style");
style.textContent = ".circle { fill: #0000FF; }";
svgDoc.rootElement.appendChild(style);

<object>他のタグについても同様です。

于 2013-08-29T10:59:39.440 に答える
0

svg を外部リソースとして設定した場合、その内部プロパティを css または javascript で変更できるとは思いません。css で iFrame のスタイルを設定しようとするようなものです。

いくつかのソリューション:

  1. HTML に SVG を埋め込む
  2. 青と赤の円でSVGからスプライトを作成し、背景位置のみを移動します
  3. 複数の SVG を作成し、クラスに応じて個別に呼び出します。それが役立つことを願っています。
于 2013-08-29T11:10:12.287 に答える