0

I'm trying to make the svg circle with box-shadow on "D3 chart" like this css code:

 box-shadow: 0 0 6px 1px rgba(35, 31, 32, 0.1);
 background-color: #ffffff;

I put this code in svg filter element, but the result was not what I thought to make. Anyone knows how to put?

Thanks in advance. :)

Ignatius
  • 2,745
  • 2
  • 20
  • 32
k0102575
  • 1
  • Possible duplicate of [SVG drop shadow using css3](https://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3) – altocumulus Apr 12 '19 at 08:02
  • It's unclear what you're asking - so this risks being closed without an answer. Please provide a copy of the SVG filter code that you wrote and what you expected the result to be as an image. – Michael Mullany Apr 13 '19 at 02:18

1 Answers1

1

You can use svg circle like this:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="rgba(35, 31, 32, 0.1)" stroke-width="6" fill="#ffffff" stroke-opacity="0.1"/>
</svg>

Or:

var svg = d3.select("body")
.append("svg")
.attr("width", 200)
.attr("height", 200);

var circle = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100).
.attr("r", 50)
.style("fill", "#ffffff")
.style("stroke", "rgba(35, 31, 32, 0.1)")
.style("stroke-width", 6);

This worked for me. Hope it helps you too :)

DIVYA BAID
  • 65
  • 5