Obramowanie prostokąta wokół tekstu SVG

Próbujesz umieścić obramowanie wokół tekstu SVG i uzyskuję różne wyniki.Obramowanie prostokąta wokół tekstu SVG

HTML: (z niemym klasy)

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

Tutaj mamy X bez wyciszenia klasy grey

Tutaj mamy X z niemym klasy red ale bez granicy

To właśnie staramy się dostać granica wyglądać red with border

Uwaga: jego rodzic jest grupą, a nie elementu HTML.

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

Źródło

2013-06-20 chris Frisina

[Pytanie] (http://stackoverflow.com/ pytania/13217669/svg-image-with-a-border-stroke) i [to pytanie] (http://stackoverflow.com/questions/3001950/how-can-can---box-around-text- with-svg) powinno pomóc. –

elementy SVG nie obsługuje właściwości CSS granicznego, jak odkryli. Opcje są

Narysuj czerwoną <rect> wokół tekstu jako granicy
ramkę na zewnętrznym <svg> elementu, jeśli jego rodzic jest element html. Zewnętrzny element <svg> jest wymienianym elementem i będzie obsługiwał właściwość border CSS.

Źródło

2013-06-20 15:53:40

Aby narysować rect wokół tekstu na kliknięcia, zaktualizuj kod do:

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

})

Na tej 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>

Źródło

2013-06-21 20:27:39

Próbowałem najpierw ustawić "rect". Uważam, że to rozwiązanie jest o wiele bardziej eleganckie. Dzięki! – jarandaf

Obramowanie prostokąta wokół tekstu SVG

Odpowiedz

Powiązane problemy