Question

我想使用CSS在单个活动SVG矩形上绘制箭头。我的svg看起来与此类似：

<svg>
   <rect width="16" height="41" transform="translate(781.5 384) rotate(90)" fill="#f8ce8b"/>
   <rect class="active" width="16" height="41" transform="translate(781.5 384) rotate(90)" fill="#f8ce8b"/>
</svg>

实际svg链接：https://terrasanta.com.au/map.html

css代码：

rect.active::after{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent #007bff transparent;
}

但是它不起作用。谁能告诉我我该怎么做。

Answer 1

正如我评论的那样：此答案说明了为什么您不能这样做：CSS :before on inline SVG

内联SVG被视为图像，并且图像被替换为不允许生成内容的元素。

OP正在评论：

还有其他方法可以动态地将svg中的元素放置在特定位置

这就是我要做的：

请注意，我已经将直肠包裹在<g>组中

对于文档中的每个rect，我都会检查rect是否具有“活动”类，如果有，则添加一个新的svg元素。

const SVG_NS = 'http://www.w3.org/2000/svg';
//all the rects
let rects = document.querySelectorAll("rect");

// for each rect 
rects.forEach(r=>{
  let bb = r.parentNode.getBBox();
  //check if the rect has a class "active"
  if(r.classList.contains("active")){
      // and add a new element - in this case a circle
      drawSVGelmt({cx:bb.x,cy:bb.y,r:10,}, "circle", r.parentNode)
  }
})

// a function used to create a new svg element
function drawSVGelmt(o, tag, parent) {

let elmt = document.createElementNS(SVG_NS, tag);
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}

svg{border:1px solid}
circle{fill:red}

<svg viewBox="730 374 61 36" width="100">
  <g>
   <rect width="16" height="41" transform="translate(781.5 384) rotate(90)" fill="#f8ce8b"/>
  </g>
  <g>
   <rect class="active" width="16" height="41" transform="translate(781.5 384) rotate(90)" fill="#f8ce8b"/>
  </g>
</svg>

使用CSS :: After绘制SVG元素

1 个答案: