SVGテキスト要素にCSSスタイルを適用できません

JSでテキストを追加すると、いくつかのスタイルルールが機能し、他のスタイルが機能しなくなることに気付きました。具体的には、ホバー上border-bottomを作成し、私のCSSスタイルルール...SVGテキスト要素にCSSスタイルを適用できません

var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('height',200) 
 
     .attr('width',200); 
 

 
svg.append('a') 
 
    .append('text') 
 
    .html('This is not a text.') 
 
    .attr('font-size', '14px') 
 
    .attr('class', 'content-text-1') 
 
    .attr('x', 10) 
 
    .attr('y', 20);

.content-text-1:hover { 
 
    border-bottom: 1px solid blue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<body> 
 
</body>

私はこの問題の「非同期」タイプ、信じないを考え、私は他の作成時に理由svg rectsやcirclesなどのようなものは、事実の後にスタイルを付けることができます。

質問：border-bottomは表示されません。

出典

2017-11-14 Arash Howaida

ここでの問題は、SVGではなく、CSSではありませんが、。 SVGはborder-bottomプロパティをサポートしていません。

は、たとえば、あなたは明確にあなたがHTML要素を持っている場合、CSSが機能することを確認できます。

var div = d3.select('body') 
 
    .append('div') 
 
    .html('This is not a text.') 
 
    .style('font-size', '14px') 
 
    .attr('class', 'content-text-1');

.content-text-1:hover { 
 
    border-bottom: 1px solid blue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

出典

2017-11-14 05:24:45

svgの代わりにdivを指定してください。svgは、サポートされていないユニークなIDを持っています。border-bottom。

var div = d3.select('body') 
 
     .append('div') 
 
     .attr('height',200) 
 
     .attr('width',200); 
 

 
div.append('a') 
 
    .append('text') 
 
    .html('This is not a text.') 
 
    .attr('font-size', '14px') 
 
    .attr('class', 'content-text-1') 
 
    .attr('x', 10) 
 
    .attr('y', 20);

.content-text-1:hover { 
 
    border-bottom: 1px solid blue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 

 
<body> 
 
</body>

出典

2017-11-14 05:22:20

うーん、すごい、なぜ変数名が違いのあまりを作るのですか？ 'svg'は予約された名前なのでしょうか？ –

@ArashHowaida変数名とはまったく関係ありません。回答者はHTML要素である 'div'を追加しています。 –

はいsvgは別のものです。 SVGは、インタラクティブ性とアニメーションをサポートする2次元グラフィックス用のXMLベースのベクトル画像フォーマットです。詳細については、https://www.w3schools.com/graphics/svg_intro.aspを参照してください。 –

SVGテキスト要素にCSSスタイルを適用できません

答えて

関連する問題