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>

SVG文本背景颜色，边框半径和填充与文本宽度匹配

1 个答案: