score:0

you need to add the image with the original height of the letter png, and then use the transformation translate to move it into place, and scale to stretch it.

a good explanation can be found here.

here's a very basic example:

http://jsfiddle.net/yb2kr/

var svg = d3.selectall("body").append("svg")
        .attr("height",600)
        .attr("width",600)

svg.append("svg:image")
   .attr("xlink:href", "https://encrypted.google.com/intl/en_all/images/logos/images_logo_lg.gif")
   .attr("width", 200)
   .attr("height", 100)

svg.append("svg:image")
   .attr("xlink:href", "https://encrypted.google.com/intl/en_all/images/logos/images_logo_lg.gif")
   .attr("width", 200)
   .attr("height", 100)
   .attr("transform", "translate(0,100) scale(1,2)")

i'm not sure that images is a better solution .. depending on how much they're stretched, they might become distorted. fonts, on the other hand, should hold their sharpness.


Related Query