CODEWITHSUNDEEP
javascriptsvgd3.js
Mod
Mod

Reputation: 5351

How to use element from defs inside a circle in D3.JS

I have a shape (a drawn cloud) in a g within a defs tag. Unfortunately, I am not able to use this shape inside a circle using d3.js. Here is my code: JSFiddle

What I am trying to do is to display that shape which is in defs tag inside the circle shown in the SVG. I have tried many times in different ways but I could not use the shape from the defs tag inside the circle. Could anyone please assist me with this issue? Thank you in advance.

Upvotes: 0

Views: 729

Answers (1)

joews
joews

Reputation: 30330

A circle can't contain other shapes. According to the MDN docs it may only contain descriptive elements and animation elements. These categories don't include shapes like circle, or use.

Rather than nesting your shapes, you should create a parent g and append the circle and use to that:

// Create a `g`, rather than a `circle`, for each data point
var groups = svg.selectAll(".group").data(data).enter().append("g")
                 .attr("class", "group");

// Append a `circle` to the new g
groups.append("circle")
                 .attr("cx",100).attr("cy",100).attr("r",20);

// Append a `use` to the new g
groups.append("use").attr("xlink:href", "#mySymbol");

JSFiddle

Upvotes: 3

Related Questions