Bordo rettangolare intorno al testo SVG

Provare a mettere un bordo attorno al testo SVG e ottengo risultati diversi.Bordo rettangolare intorno al testo SVG

HTML: (con la classe mute)

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

Qui abbiamo la X senza la classe mute grey

Qui abbiamo la X con la classe mute red ma senza confine

Questo è ciò che stiamo cercando di raggiungere il confine a guardare come red with border

Nota: suo padre è un gruppo, non un elemento HTML.

JS Fiddle: http://jsfiddle.net/chrisfrisina/yuRyr/5/

fonte

2013-06-20 chris Frisina

[Questa domanda] (http://stackoverflow.com/ domande/13217669/svg-image-with-a-border-stroke) e [questa domanda] (http://stackoverflow.com/questions/3001950/how-can-i-draw-a-box-around-text- with-svg) dovrebbe aiutare. –

elementi SVG non supportano la proprietà border CSS come avete scoperto. Le opzioni disponibili sono

Disegnare un rosso <rect> intorno al testo come un confine
inserire un bordo sul <svg> elemento esterno se il suo genitore è un elemento HTML. L'elemento esterno <svg> è un elemento sostituito e supporterà la proprietà del bordo CSS.

fonte

2013-06-20 15:53:40

Per disegnare un rettangolo intorno al testo su click, aggiornare il codice per:

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

})

In questa html:

<!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>

fonte

2013-06-21 20:27:39

Stavo cercando di posizionare un 'rect' prima. Trovo questa soluzione molto più elegante. Grazie! – jarandaf

Bordo rettangolare intorno al testo SVG

risposta

Problemi correlati