Блог

Я использую JavaScript для добавления кругов к встроенному SVG. Как я могу стилизовать эти круги, чтобы включить эффект тени?

Я нашел CSS-функцию drop-shadow(), но, по-видимому, она не применяется к отдельным элементам SVG.

Я также нашел элемент фильтра SVG и то, как его можно вручную включить в код в разделе defs. Но в моем случае SVG извлекается во время выполнения, и мне нужно добавить тень программно.

 <filter id="shadow">
  <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>
 

[обновление] Я почти на месте. Чего я не понимаю, так это почему моя тень обрезается, чтобы поместиться в квадрат.

Мой код:

 // Add the drop-shadow effect
let defs = document.createElementNS(NS, 'defs');
let filter = document.createElementNS(NS, 'filter');
filter.setAttribute("id", "dropshadow");

let feDropShadow = document.createElementNS(NS, 'feDropShadow');
feDropShadow.setAttribute("dx", "0");
feDropShadow.setAttribute("dy", "0");
feDropShadow.setAttribute("stdDeviation", "2");

draw.appendChild(defs);
defs.appendChild(filter);
filter.appendChild(feDropShadow);