I'm using FabricJS and I encounter a problem with the display of my SVG in the canvas:
the result is displayed outside the selection box of fabricJS (due to a translation ?)
the anchors of the selection disappear after a transformation and then it's impossible to find them back.
Here is a screenshot :
I'm using an output SVG of Potrace and I think it's the origin of my issue.
Here is the code of the SVG: SVG code in pastebin
You can test it with FabricJS on this page: FabricJS Kitchensing example.
Just paste the code of the SVG in the "Load SVG" area, then resize and rotate the section box to display the SVG.
Do you know the part of my SVG code or the part of the fabricjS code that causes the issue ?
If so, can I change it easily by myself ? If not, is it possible for anybody to correct or locate the possible mistake?
Thank you very much for your help.
EDIT: seemingly, FabricJS doesn't like this line of the SVG:
<g transform="translate(0,648) scale(0.098780,-0.098780)" fill="#000000" stroke="none">
And more especially the translate and scale attributes… How to fix it?
EDIT2: the solution would be that the translate and the scale are respectively equal to (0,0) and (1,1) or, better, that they're applied to the coordinates.
Does anybody have an idea to do that with Potrace or JS script?
2 years after, fabricJs is now able to fully parse and manage this SVG.
Just paste the old pasteBin SVG code in the kitchenSink demo and you will see that it loads fine.
Lots of improvement happened recently in the SVG parsing area.
I know this is not an answer as stackoverflow user would expect, but better to know that to think this is may still be a problem.
Related
I'm trying to use SVG symbols as described in this CSS tricks article, but get a gap on the left and right around the SVG and it's width is 300px wide.
I want the SVG to fill the full width of the container. Adding width: 100% to the SVG doesn't help.
I've made a codepen to explain what is happening. The first example shows the problem.
Adding a viewBox attribute corrects the issue in the second example, but that's not ideal because I'm generating the SVG symbol from a folder of SVGs using webpack. So the viewBox information will have to be copy/pasted every time I reference an SVG in the HTML. This isn't ideal when you consider other people might want to edit the SVGs at a later date and might not realise they have to manually update the viewBox info in the HTML, which would result in broken looking icons.
This would become as unwieldy as having to explicitly add the dimensions of an image to all <img> tags. Not a great situation!
Is there any other way to fix it without adding a viewBox attribute?!
I am building an AureliaJS based application which contains a SVG based component. My problem is that in MS Edge, the gradients of this SVG are not rendered (see image below: the "gauge" is supposed to be transparent and the two circles green). It is correctly displayed in all the other browsers I tested (FireFox, IE11, Chrome).
The gradients are defined inside the SVG in a defs section. They are then used by their ids.
I tried:
To open the SVG part of the component as an SVG file in Edge. Strangely it renders correctly. So I guess the SVG is correct.
To remove the Aurelia markup: the problem is still here.
To change the value of fill (currently fill: url(#gauge-fill-2)) into fill: url('#gauge-fill-2') or fill: url('/#gauge-fill-2') without success.
I also get the message below in the console, which disappears if I remove this SVG (I translated it from French as I have a French edition of Windows 10)
XML5633: The name of the ending tag doesn't match the name of the starting tag.
Line. 60, column 7
However, when I read the code, I couldn't find any problem about closing tags. To be sure of this, I remove most of the code and left only one element with a gradient on it. This message was still there.
The full code of the component is available here: https://bitbucket.org/arenaoftitans/arena-of-titans/src/9f5f70ff3fc71832bcac90ce0dcc5204a471b095/app/game/play/widgets/gauge/gauge.html?at=master&fileviewer=file-view-default
Any idea of what the problem might be and how to solve it?
The problem is solved by the creators update. I just need for it to be widely deployed.
I've a web page in which there is a SVG box <svg id='graph'>...</svg>.
I would like to give to the user the possibility to zoom in the SVG box.
I use for this purpose document.getElementById("graph").currentScale*=2; if I want to double the size of the box, for example.
The problem is that all the window is resized, even the HTML elements outside the box.
Do you know the origin of this problem please ?
In order to apply zoom to only svg , use this...
<svg>
<g transform="scale(2)">
</g>
</svg>
This may be off the mark without knowing which browser you're using, but you may not be able to implement currentScale if you're using anything other than Internet Explorer or Microsoft Edge. You can test this for yourself by trying this JSBin in different browsers and see where it scales.
Diving into this deeper, a Google search of "SVG currentScale" found these bug threads from Google and Mozilla discussing similar issues. The Mozilla thread discusses it was a choice made specifically for consistency's sake. SVG's currentScale only applies to container elements and not to inner elements. This could interfere with functions like zoomAndPan used on inner SVG elements. Additionally, better cross-browser solutions are already in place such as scale() via the transform property.
i want to acheive the effect on this page using SVG. As you can see it uses a series of PNG transparent overlays when the user mouses over a polygonal hotspot drawn on a product.
What i want to achieve is the same thing with SVG, but without messing about with creating a load of PNGs, so that when the user mouses over an area the transparent shape (with link on it) appears over the top. The SVG shape would be built from a set of coordinates exactly as a polygonal hotspot would on an image map.
So i guess my first question is, can this be done with plain old SVG or do i need to use something like Raphael to achieve this? Never seen this effect before with SVG so if anyone has an example like that would be very useful.
Thanks in advance.
There are several ways to get this effect with plain old SVG. Probably the simplest is to use CSS within the SVG. For example:
<style>
.overlay:hover
{
opacity: 0.5;
}
</style>
<svg>
<a xlink:href="http://www.wherever/you/want/to/link/to.com">
<path class="overlay" d="Coordinates of your shape..." />
</a>
</svg>
I've written about various other methods at:
http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
Yes it can be done with SVG only, with or without javascript.
One way to get the effect would be to overlay a white semi-transparent path on top of the image that you want to whiten. Another way would be to use an SVG filter to process the image directly, similar to what I've done here or here to recolor a PNG (view page source and feel free to reuse that in any way you like).
You'll want to make use of the 'pointer-events' property most likely. Here's an example showing how to detect mouse-events on the fill and/or stroke of an svg shape, even if the shape is invisible.
I would like to take a multiline block of text and display it in SVG. I would like to keep the lines as lines. Is there a proper way to do this?
I am using Inkscape for my base drawing and Batik for my rendering. It seems the two do not agree on how to do this.
Inkscape is creating a structure like this:
<flowRoot
xml:space="preserve"
id="flowRoot3089"
style="font-size:16px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(19.71875,334.88681)">
<flowRegion id="flowRegion3091">
<rect id="rect3093" width="50.78125" height="75" x="34.765625" y="155.89932"/>
</flowRegion>
<flowPara id="flowPara3123">Item 1</flowPara>
<flowPara id="flowPara3137">Item 2</flowPara>
<flowPara id="flowPara3139">Item 3</flowPara>
</flowRoot>
However, this is not acceptable to Batik for some reason.
Inkscape sets the SVG version of the document to 1.1 instead of 1.2, but still uses flowing text.
The simple solution for you is to edit your svg document and change the SVG version attribute to 1.2. Inkscape will not change it back to 1.1 and it handles the 1.2 version specifier fine.
Batik will then be happy to provide most functionality, however you'll also run into another Inkscape bug if you mess with pretty much any of the text attributes within the flow root that Inkscape creates. It sets the background color to the selected foreground color for the text, which means if you set the text color to red in Inkscape, when batik renders it, you'll see a red square ... the text is there, but its red too, so not really visible. This an Inkscape bug and is clearly visible in the code for the flowRegion -> rect element.
The solution is to manually edit your flowRect attributes after tweaking them with inkscape.
Batik also seems to do better if you use the standard svg output rather than inkscape svg output.
This is not acceptable since flow* elements are non-standard elements. It comes from an SVG1.2 draft that has never been accepted and it is designed to wrap text in custom shapes. Only Inkscape and some builds of Opera support it. So, don't use it, at least for the moment.
If you don't need text wrapping (and you don't seem to, but I don't understand what you mean by "I would like to keep the lines as lines"), I suggest you use the basic <text/> element.
I'd suggest <text> with <tspan> children. Inkscape can generate that for you quite easily, just don't click and drag an area but instead just click where you want the text and start writing, press return where you want a new line.
Alternatively, foreignObject will allow you to include html:
<svg:foreignObject><html:body><div>text here</html:div></html:body></svg:foreignObject>
Doesn't seem to work in Opera or IE, though.