Having a strange issue while using SVGs in TornadoFX. I have a few SVGs strings stored in an enum I'm using as background images in my program. When I view the exact same SVG path in an online viewer, there is no distortion and it appears correctly:
but when I use the same path in TornadoFX as a svgpath node content, it appears like so:
Note the strange thinning of the lines in the top and bottom middle sections.
It's easier to see with the second svg:
Online viewer:
TornadoFX program:
I'm not quite sure what could be causing this. In everything else I view the SVGs in (web, illustrator) they appear fine, but as soon as I load them as a string in a svgpath node, they appear distorted.
I'm initializing them like this:
class mView : View() {
override val root = stackpane {
svgpath("M910.7,329.8a446.43,446.43,0,1,0,35,173.23A443.52,443.52.. etc") {
addClass(SvgStyle)
}
//..
}
Any ideas what would be causing this strange distortion? I'm pullin my hair out here.
edit: a fiddle of the curvy SVGs
TornadoFX doesn't affect the SVG rendering in any way, so I can't see any other explanation that this being a bug in the SVG rendering capabilities of JavaFX. Perhaps you're using a path expression not supported by JavaFX?
For the sphere, can you try setting the stroke on the SVGPath object as in the following example?
stackpane {
svgpath("M107 380c40,-101 80,-102 120,-1m-1 -4c39,101 79,102 120,1m-1 4c39,-101 79,-101 120,-1m-1 -2c39,100 79,101 120,1", FillRule.EVEN_ODD) {
fill = Color.WHITE
stroke = Color.BLACK
strokeWidth = 16.0;
}
}
In the curves part of the question, can you post the full SVG path? I suspect there's something in the path source telling JavaFX to render the thinner segments.
Related
I have a project due for University that involves SVGs, however mine won't load. All I get is:
"Ignoring image tag.
The width and/or height is not readable in the svg tag of this file."
Please help? I'm trying to load an SVG that has colour in it. This is the code:
PShape m;
void setup() {
size(1280, 720);
m = loadShape("mountain.svg");
}
void draw(){
background(102);
shape(m, 110, 90, 50, 50);
}
And if you need the SVG or something, let me know.
Thanks
I think I solved it.
just make sure that your artboard is bigger that your illustration.
For instance, If you set the artboard to fit bounds, then processing would mostly likely give you this message.
Another thing that I realised is that if you're using illustrator 2015, your SVG file will be moved to the left of the processing screen, and sometimes outside of it.
A workaround would be to put your illustration towards the top right of the screen, then save as an SVG file.
OR, you could just download illustrator 2014, you can do that from the creative cloud app on your computer. Just remember to always leave plenty of space for your illustration in the illustrator dartboard before you save.
I hope that helps!
I am new to SVG.js and javascript in general, and I was going over the documentation here http://documentup.com/wout/svg.js#usage/svg-document and was having some issues.
Usage
Create a SVG document
Use the SVG() function to create a SVG document within a given html element:
var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
so I was assuming from this they want us to call a function so what I've gathered from messing around a little in Three.js is that I need to do
<script>
function SVG()
{
//Use the SVG() function to create a SVG document within a given html
var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
}
</script>
within the body tag. This doesn't work however. When calling SVG(); I get an error
Uncaught RangeError: Maximum call stack size exceeded (15:22:47:898 | error, javascript)
at SVG (:18:13)
at SVG (:20:12)
at SVG (:20:12)
at SVG (:20:12)
at SVG (:20:12)
at SVG (:20:12)
There are other ways I can do it as mentioned, but it seems that the easiest method would be to call a function, but again I'm not sure if I'm doing this correctly.
I have a background in Java, just getting off of a project with JMonkeyEngine, so I'm not new to programming, but confused with what exactly I need to do with this, since the documentation is extremely vague and seems to suggest that you need to understand their terminology as to where to put the code.
I have also found a few other librarieslike snap.svg, d3, and raphael
http://d3js.org/
raphaeljs.com/
snapsvg.io/
I'm really just trying to create a bunch of pictures/colored boxes (interchangable so essentially a box with an image that can then be turned off and be displayed as a color) with borders, that can respond to mouse even of clicking and dragging around on desktop and mobile browsers. Essentially not much, but it seems like these all have similar features just a different coding feel.
Any advice?
Thank you everyone!
As said by Nils, there is a Hello World example here: https://stackoverflow.com/tags/svg.js/info
You also find plenty of documentation and examples to see what you have to do.
//Use the SVG() function to create a SVG document within a given html
var canvas = SVG(idOfElement)
// now an svg was created in the element with the id
// draw a rectangle
canvas.rect(100,100)
I recently started working with Google Dart (www.dartlang.org) and playing with SVG.
I am trying to scale a generated SVG to fit into a <div> using a viewBox.
People on StackOverflow already gave me a lot of help.
I am now able to scale paths like this: Dart create and transform an SVG path
But is seems that viewBox is made for scale-to-fit and using it would save me from scaling all paths in the svg separately. That is why I want to use a viewBox.
I tried the following:
// get bounding box of the created svg
Rect bb = path.getBBox();
// create a viewBox for the svg to fit in the div
var viewBox = svg.viewBox.baseVal
..x = bb.x
..y = bb.y
..width = bb.width
..height = bb.height;
// center the image inside the div
svg.preserveAspectRatio.baseVal
..meetOrSlice = PreserveAspectRatio.SVG_MEETORSLICE_MEET
..align = PreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;
But no scaling happens.
How would I solve this?
While writing this question and retrying to make sure I tried anything before asking here, I found the following solution.
It seems like Dartium (Chrome with a native Dart VM) has a bug (issue 12224) where changes to the viewBox are not reflected directly.
Adding the following code after changes to the viewBox forces Dartium to somehow resize to the requested size:
// add an empty ```<g>``` element to force svg resize
SvgElement g = new SvgElement.tag('g');
svg.append(g);
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.