Нарисуйте элемент SVG, используя css :: after

Question

Я хочу нарисовать стрелку над одним активным svg-прямоугольником, используя css. Мой 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: до этого встроенный SVG

встроенный SVG обрабатывается как изображение, а изображениязамененные элементы, которые не могут генерировать контент.

ОП комментирует:

Есть ли другой способ, которым я могу поместить элемент в svg вопределенная позиция динамически

Вот как я бы это сделал:

Обратите внимание, что я обернул реты в группу <g>

Для каждого прямоугольникав документе я проверяю, есть ли у прямоугольника класс «активный», и добавляю ли он новый элемент 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>