Rectangle de la bordure autour du texte SVG

Essayer de mettre un cadre autour de certains SVG texte, et j'ai obtenu des résultats variables.

HTML: (avec le muet classe)

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

Ici, nous avons le X sans le muet classe Rectangle de la bordure autour du texte SVG

Ici, nous avons le X avec le muet classe Rectangle de la bordure autour du texte SVG mais sans la frontière

C'est ce que nous essayons de passer la frontière pour ressembler à Rectangle de la bordure autour du texte SVG

Note: sa mère est un groupe, pas un élément HTML.

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

question et question devrait aider.

OriginalL'auteur chris Frisina | 2013-06-20

  1. 14

    Éléments SVG ne prennent pas en charge le CSS de la frontière de la propriété que vous avez découvert. Vos options sont

    1. Dessiner un rouge <rect> autour du texte comme une frontière
    2. Mettre une bordure sur l'extérieur <svg> élément si son parent est un élément html. L'extérieur <svg> élément est un élément remplacé et soutenir le CSS bordure de propriété.

    OriginalL'auteur Robert Longson

  2. 11

    Pour dessiner un rectangle autour du texte sur un clic, mettre à jour le code:

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

})

    Sur ce 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>
    J'ai essayé de positionner un rect premier. Je trouve cette solution bien plus élégante. Merci!

    OriginalL'auteur Alvin K.