I've a JSON object that defines an image on the canvas like so:
The JSON was created from Fabricjs version 1.7.17 and I'm loading that JSON into a canvas made from Fabricjs versions 2.3.6 & 2.4.1 and this is what the image looks like:
The canvas sizes are the same and the options for the canvas are the same. The JSON loads just fine in the 1.7.17 version. All the other objects from the JSON data load fine, the image box is the right width/height and placement (left & top)...it's just the image isn't scaled to fit.
I've tried setting the scaleX/Y, resize filters to no avail - anyone tackle this issue already?
Fabric 2.0 changed the way that height/width attributes are handled for images in order to support cropping. You'll find an explanation and example code for dealing with this here:
http://fabricjs.com/v2-breaking-changes#image
I've tried very best to resolve issue of images not loading in circle. It shows transparent nodes. Kindly help.
json sample
{"name":"root","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","size":250,"value":44,"children":[{"id":"id0","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#iHeartRadio","size":150,"value":48,"children":[{"id":"id1","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#IamDiamondEyes","size":140,"value":44},{"id":"id6","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#clearhair","size":90,"value":25}]},{"id":"id2","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#Macys","size":130,"value":43},{"id":"id3","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#natekristanto","size":120,"value":42},{"id":"id4","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#CVGUpdates","size":110,"value":32},{"id":"id5","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#w0nderfvl","size":100,"value":27},{"id":"id7","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#BPlizak","size":180,"value":24},{"id":"id8","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#courtneyerhard4","size":170,"value":24},{"id":"id9","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#BriaKelly","size":160,"value":19},{"id":"id10","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#bulbaqsauce","size":150,"value":19},{"id":"id11","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#kubbyop","size":140,"value":19},{"id":"id12","icon":"https://pbs.twimg.com/profile_images/672863761674338304/V8Y88vu5.jpg","name":"#Lemonade229","size":130,"value":18}]}
Codeflower code: https://pastebin.com/VFS6DZie
Thanks in advance
Solution was upgrading to d3.3
Hello I'm new to SVG and tryed to follow a tutorial.
My problem is that the SVG filter is not showing on the object.
(when you click the object it should give an animation)
I hope somebody could help me with this problem.
link to code: codepen.io/sanderman789/pen/yVYvRL
I added a data layer on my map and I'm using an svg image to represent the markers.
#points {
point-file: url(marker2.svg);
marker-width:10;
marker-fill:#fff;
}
since it's an SVG image, I'm trying to customize the fill color but it is not working. marker-fill seems to only work on the markers they provide, but not on SVG images. Is this possible to do using TileMill/Mapbox ? Is it possible with the JS API ?
UPDATE
From http://mapbox.com/blog/announcing-tilemill-0.10.0/, it looks like using marker-fill should have done the trick but that's not the case. Could the problem be with my svg image ?
Solved it, looks like if you're looking to customize the marker, you need
marker-file: url(marker2.svg); instead of point-file: url(marker2.svg);
Has anyone in this vast space has ever had the luck to successfully create a PDF with an embedded SVG on an HTML? I've been receiving segmentation fault all the time.
Or perhaps is there any other way to embed an SVG into an HTML file and then export it to PDF instead of wkhtmltopdf?
I had similar problem. Seems like javascript embedded in SVG image can cause segmentation fault.
I was generating SVG graphs using pygal Python module. To successfully generate PDF from HTML with SVG graphs I had to do several things:
Remove reference to javascript. (In case of pygal add js=() key to a graph constructor).
Specify image size in svg tag, like
<svg ... width="300" height="200">
(In case of pygal use explicit_size keywoard)
Embed SVG image into img tag in base64 encoded form, like
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0...">
I was using 11th version of wkhtmltopdf.
If this fix doesn't work for others, here's what worked for me with chartist.js, and wkhtmltopdf 0.12.2.1 under Ubuntu 64. (Credit to Panokev)
Add this to your javascript before all other JS.
{
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
Definitively set width style for chart div, for example - style="width:950px;"
Right .. I managed to pull it off finally ... all needed was a bit of treatment on the original eps file. I opened the file with illustrator and chose to "flatten transparency" .. maybe what it does was to flatten the many layers of the file or something .. then save as svg .. and it rendered nicely in the PDF ..
Hopefully this helps if anyone out there would have the same issue as I did. Thank you! :D
We fixed this problem by adding a width and height attribute to the svg besides the viewbox attribute.