SVGテキストの背景色と境界の半径とテキストの幅に一致する埋め込み

Question

SVG内のテキスト要素の周りに背景をラップする必要があります。パディングと境界線の半径が必要です。問題はテキストが動的なので、テキストの幅を広げるために背景が必要なことです。私は異物を使用してこれに対する解決策を見つけましたが、これは問題であるIE 11のサポートではありません。誰でも回避策を提案できますか？

Answer 1

スクリプトを使用できる場合は、この小さな機能を使用できます。いくつかのCSS値を処理します。ただし...何が必要

function makeBG(elem) { 
 
    var svgns = "http://www.w3.org/2000/svg" 
 
    var bounds = elem.getBBox() 
 
    var bg = document.createElementNS(svgns, "rect") 
 
    var style = getComputedStyle(elem) 
 
    var padding_top = parseInt(style["padding-top"]) 
 
    var padding_left = parseInt(style["padding-left"]) 
 
    var padding_right = parseInt(style["padding-right"]) 
 
    var padding_bottom = parseInt(style["padding-bottom"]) 
 
    bg.setAttribute("x", bounds.x - parseInt(style["padding-left"])) 
 
    bg.setAttribute("y", bounds.y - parseInt(style["padding-top"])) 
 
    bg.setAttribute("width", bounds.width + padding_left + padding_right) 
 
    bg.setAttribute("height", bounds.height + padding_top + padding_bottom) 
 
    bg.setAttribute("fill", style["background-color"]) 
 
    bg.setAttribute("rx", style["border-radius"]) 
 
    bg.setAttribute("stroke-width", style["border-top-width"]) 
 
    bg.setAttribute("stroke", style["border-top-color"]) 
 
    if (elem.hasAttribute("transform")) { 
 
    bg.setAttribute("transform", elem.getAttribute("transform")) 
 
    } 
 
    elem.parentNode.insertBefore(bg, elem) 
 
} 
 

 

 
var texts = document.querySelectorAll("text") 
 
for (var i = 0; i < texts.length; i++) { 
 
    makeBG(texts[i]) 
 
}

text { 
 
    background: red; 
 
    border-radius: 5px; 
 
    border: 2px solid blue; 
 
    padding: 5px 
 
} 
 

 
text:nth-of-type(2) { 
 
    background: orange; 
 
    border-color: red 
 
} 
 

 
g text { 
 
    border-width: 4px 
 
}

<svg width="400px" height="300px"> 
 
    <text x="20" y="40">test text</text> 
 
    <text x="20" y="80" transform="rotate(10,20,55)">test with transform</text> 
 
    
 
    <g transform="translate(0,100) rotate(-10,20,60) "> 
 
    <text x="20" y="60">test with nested transform</text> 
 
    </g> 
 
</svg>