SVGテキストの周りの矩形の境界線

SVGテキストの周りに境界線を置こうとすると、結果が変化します。SVGテキストの周りの矩形の境界線

HTML：（ミュートクラスで）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <text x="37.5" y="37.5" class="ablate-x mute">X</text> 
</svg>

CSS：

.ablate-x { 
    font-size: 24px; 
    color: gray; 
    opacity: 0.5; 
    font-weight: 900; 
    cursor: hand; 
    cursor: pointer; 
} 

.mute { 
    opacity: 1; 
    fill: red; 
    stroke: red; 
    stroke-width: 2px; 
    /* we tried border: 2px solid red; but it didn't work */ 
}

D3.js：ここ

.on("click", function(d) { 
    var selection = d3.select(this); 
    selection.classed("mute", (selection.classed("mute") ? false : true)); 
})

我々はミュートクラス grey

なし Xを持っています

ここでは、ミュートクラス red でXを持っていますが、国境

なしこれは、我々が red with border

ノートのように見えるように境界線を取得しようとしているものである：その親がグループではなく、HTML要素です。

JSフィドル：あなたが発見したとして http://jsfiddle.net/chrisfrisina/yuRyr/5/

出典

2013-06-20 chris Frisina

[この質問]（http://stackoverflow.com/質問/ 13217669/svg-image-with-border-stroke）と[この質問]（http://stackoverflow.com/questions/3001950/how-can-i-draw-a-box-around-text- with-svg）が役立つはずです。 –

SVG要素は、CSSのborderプロパティをサポートしていません。あなたのオプションは

親がhtml要素であれば、外<svg>要素に境界線を入れて国境
などのテキストの周りに赤い<rect>を描画します。外側の<svg>要素は置き換えられた要素であり、CSS境界プロパティをサポートします。

出典

2013-06-20 15:53:40

、クリック時にテキストの周りに矩形を描画するコードを更新する：このHTMLで

var svgcanvas = d3.select('svg'); 

$("#xc").on("click", function (d) { 
    var selection = d3.select(this); 
    var rect = this.getBBox(); 
    var offset = 2; // enlarge rect box 2 px on left & right side 
    selection.classed("mute", (selection.classed("mute") ? false : true)); 

    pathinfo = [ 
     {x: rect.x-offset, y: rect.y }, 
     {x: rect.x+offset + rect.width, y: rect.y}, 
     {x: rect.x+offset + rect.width, y: rect.y + rect.height }, 
     {x: rect.x-offset, y: rect.y + rect.height}, 
     {x: rect.x-offset, y: rect.y }, 
    ]; 

    // Specify the function for generating path data 
    var d3line = d3.svg.line() 
     .x(function(d){return d.x;}) 
     .y(function(d){return d.y;}) 
     .interpolate("linear"); 
    // Draw the line 
    svgcanvas.append("svg:path") 
     .attr("d", d3line(pathinfo)) 
     .style("stroke-width", 1) 
     .style("stroke", "red") 
     .style("fill", "none"); 

})

：

<!DOCTYPE html> 
    <html> 
    <head> 
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    </head> 
    <body> 
     <svg width="720" height="720"> 
      <text x="37.5" y="37.5" id="xc">X</text> 
     </svg> 
    </body> 
    </html>

出典

2013-06-21 20:27:39

私は最初に 'rect'を配置しようとしていました。私はこの解決策をはるかにエレガントにしている。ありがとう！ – jarandaf

SVGテキストの周りの矩形の境界線

答えて

関連する問題