CODEWITHSUNDEEP
javascriptjqueryhtmlsvgd3.js
Pilkington
Pilkington

Reputation: 97

How to style SVG path to take an image?

Here is my JSFiddle.

I am simply trying to set up this image in the middle of my arc. My best intuition tells to use .attr("fill","url('somePicture')"), but for the life of me that hasn't been a viable solution.

var width = 700,
    height = 600,
    tau = 2 * Math.PI

var arc = d3.svg.arc()
            .innerRadius(100)
            .outerRadius(250)
            .startAngle(0)

var arc2 = d3.svg.arc()
            .innerRadius(0)
            .outerRadius(100)
            .startAngle(0)

var svg = d3.select("body")
            .append("svg")
            .attr("width",width)
            .attr("height",height)
            .append("g")
            .attr("transform", "translate(" + width/2 + "," + height/2 + ")")

//gray null background
var background = svg.append("path")
                    .datum({endAngle: tau})
                    .style("fill", "#ddd")
                    .attr("d", arc)

var center =     svg.append("image")
                    .append("path")
                    .datum({endAngle: tau})
                    .attr("d", arc2)
                    .attr("class","record")
                    .attr("xlink:href", "http://lorempixel.com/g/400/400/")

Upvotes: 0

Views: 126

Answers (2)

hjonasson
hjonasson

Reputation: 140

If I understand you correctly, you mean that if you want to resize the whole thing, then the image will change with it. Correct? You can do that by making all numbers functions of others.

I start with defining

innerR = 100

for lack of a better name. Then all other non-zero functions are functions of that. There is a fiddle here. Experiment with that parameter and see what happens.

Upvotes: 1

hjonasson
hjonasson

Reputation: 140

You don't need to define a path. If you look into your html, the image is there but it's of size 0x0.

var center =     svg.append("image")
                .datum({endAngle: tau})
                .attr("d", arc2)
                .attr("class","record")
                .attr("width",400)
                .attr("height",400)
                .attr("x",-200)
                .attr("y",-200)
                .attr("xlink:href", "http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/glossy-black-icons-symbols-shapes/018712-glossy-black-icon-symbols-shapes-shapes-circle.png")

In your fiddle you attached the wrong image. If you keep your code the same aside from this it should work. Good luck.

Upvotes: 1

Related Questions