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)); 
})

在這裏，我們有沒有X靜音類 grey

在這裏，我們有X有弱音器類 red 但沒有邊界

這是我們正在試圖讓邊框看起來像 red with border

注：其父是一個羣體，不是一個HTML元素。

JS小提琴： http://jsfiddle.net/chrisfrisina/yuRyr/5/

來源

2013-06-20 chris Frisina

[這個問題]（http://stackoverflow.com/問題/ 13217669/svg-image-with-a-border-stroke）和[this question]（http://stackoverflow.com/questions/3001950/how-can-i-draw-a-box-around-text-與-svg）應該有所幫助。 –

SVG元素不支持CSS border屬性，你已經發現。你的選擇是

繪製文本週圍的紅色<rect>爲把邊界外<svg>元素上邊框
如果其父是一個html元素。外部<svg>元素是一個替換的元素，將支持CSS邊框屬性。

來源

2013-06-20 15:53:40

要繪製一個矩形，周圍的文字上點擊，更新代碼：

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文本週圍的矩形邊框

回答

相關問題