Fabric.js svg without outline not loading - javascript

I am having problems with loading svg files with fabric.js version 2.3.5. It seems that you cannot import shapes without an outline. See example below. This used to work fine in fabric.js version 1.7.22, but fails work with version 2.0.0 and higher. Is this intentional or an issue (bug)? Or do I need to modify the javascript code (see below)?
svg with outline (import works with fabric 2.3.5)
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<g>
<path stroke="none" fill="#808080" d="M120 80 L120 160 40 160 40 80 120 80"/>
<path fill="none" stroke="#ff0000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M120 80 L120 160 40 160 40 80 120 80"/>
</g>
</svg>
svg without outline (import works with fabric 1.7.22, but not with 2.0.0 and higher)
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<g>
<path stroke="none" fill="#808080" d="M120 80 L120 160 40 160 40 80 120 80"/>
</g>
</svg>
Javascript:
var load_imgs=function() {
fabric.loadSVGFromURL('mySvg.svg', function (objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
var logo = new fabric.Group(obj.getObjects(), {
left:20,
top: 10,
originX: 'left',
originY: 'top'
});
logo.scaleToHeight(50);
canvas.add(logo);
});
}();


After some time, I accidently discovered that the groupSVGElements is no longer valid or needed. So a correct working code is:
var load_imgs=function() {
fabric.loadSVGFromURL('mySvg.svg', function (objects, options) {
var logo = new fabric.Group(objects, {
left:20,
top: 10,
originX: 'left',
originY: 'top'
});
logo.scaleToHeight(50);
canvas.add(logo);
});
}();

Related

setAttribute smooth transition

I trying to recreate this smil animation with pure javascript
<svg viewBox="0 0 600 600">
<path id="foo" d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="black">
<animate
attributeName="d" to="M500 500 C 20 20, 40 20, 50 10"
dur="5s" repeatCount="indefinite" />
</path>
</svg>
The problem here is when I use setAttribute to recreate the animation on click
the animation is sudden
var path = document.getElementById('foo');
path.addEventListener("click", function(){path.setAttribute('d','M500 500 C 20 20, 40 20, 50 10');});
and I can't figure out how to make it smooth like the smil
Is there a way to make it in pure js ?

You can begin an animation on a click event.
<svg viewBox="0 0 600 600">
<path id="foo" d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="black">
<animate
attributeName="d" to="M500 500 C 20 20, 40 20, 50 10"
dur="5s" begin="0s;foo.click" repeatCount="indefinite" />
</path>
</svg>

Animate line in desired direction with Vivus.js

I'm trying to animate this line so it would start from top to bottom, and then turn right to draw itself, with Vivus.js. However, the graphic does not seem to animate and I can't figure out why..anyone has some experience with SVG draw animations perhaps? Here's the pen: https://codepen.io/anon/pen/mLzYyE
Code:
var animate = ["animate1"];
animate.forEach(function (svgId) {
return new Vivus(svgId, {
type: "async",
start: "autostart",
duration: 100
});
});

As I understand Vivus.js works only with path element. So in your case you should replace rect elements to path. I also changed type to oneByOne for sequenced animation. Here is a simplified example:
var animate = ["animate1"];
animate.forEach(function (svgId) {
return new Vivus(svgId, {
type: 'oneByOne',
start: "autostart",
duration: 100
});
});
svg {
height: 500px;
width: 200px;
}
path {
stroke-width: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.3/vivus.min.js"></script>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="animate1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 66.598 221.333" enable-background="new 0 0 66.598 221.333" xml:space="preserve">
<path stroke="red" d="M0 0 l 0 20"/>
<path stroke="red" d="M0 25 l 0 20"/>
<path stroke="red" d="M0 50 l 0 20"/>
<path stroke="red" d="M0 75 l 30 0"/>
</svg>

Vivus JS doesn't seem to animate certain <path> nodes

I'm playing with the Vivus JS library, which is very cool for animating paths like drawing a picture. Now, I have this SVG icon that should animate to a 100% line-width, but it doesn't seem to work. On other icons in my project it works well.
See this CodePen: http://codepen.io/anon/pen/yOqdbN summarized as follows
<svg xmlns="http://www.w3.org/2000/svg">
<path d="...">
<path d="...">
</svg>
Does anyone know why this is happening? Thank you very much for any help pointing me in the right direction.

Vivus works by animating the strokeDashOffset property of a path which requires that your path has a stroke defined, e.g.
<path d="..." stroke="black">
Note that from your nodes I see that you can achieve better results setting fill="transparent"
var els = document.querySelectorAll('path');
Array.prototype.slice.call(els).forEach(function(el) {
el.setAttribute('stroke', 'black')
el.setAttribute('fill', 'transparent')
})
var SVGcrown = new Vivus('SVGcrown', {
duration: 300,
animTimingFunction: Vivus.EASE_OUT
});
body {
background: #FFF;
}
#SVGcrown {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.0/vivus.js"></script>
<svg id="SVGcrown" enable-background="new 0 0 48 48" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M41.93,38H6.07l-0.251-0.167C2.175,35.413,0,31.363,0,27c0-7.168,5.832-13,13-13c2.069,0,4.128,0.499,5.954,1.442 l-0.918,1.777C16.47,16.41,14.776,16,13,16C6.935,16,2,20.935,2,27c0,3.594,1.744,6.936,4.681,9h34.638 C44.256,33.936,46,30.594,46,27c0-6.065-4.935-11-11-11c-1.778,0-3.473,0.411-5.04,1.222l-0.919-1.775 C30.868,14.5,32.929,14,35,14c7.168,0,13,5.832,13,13c0,4.363-2.175,8.413-5.819,10.833L41.93,38z"
/>
<path d="M42,48H6c-2.611,0-3.978-2.013-3.978-4.001C2.022,42.012,3.389,40,6,40h36c2.611,0,3.978,2.013,3.978,4.001 C45.978,45.988,44.611,48,42,48z M6,42c-1.46,0-1.978,1.077-1.978,1.999C4.022,44.922,4.54,46,6,46h36 c1.46,0,1.978-1.077,1.978-1.999C43.978,43.078,43.46,42,42,42H6z"
/>
<path d="M12.695,32.032c-0.411,0-0.795-0.255-0.942-0.663C11.253,29.97,11,28.5,11,27c0-7.168,5.832-13,13-13s13,5.832,13,13 c0,1.49-0.251,2.952-0.746,4.346c-0.186,0.52-0.76,0.789-1.277,0.607c-0.521-0.185-0.792-0.757-0.608-1.277 C34.788,29.498,35,28.262,35,27c0-6.065-4.935-11-11-11s-11,4.935-11,11c0,1.27,0.214,2.513,0.637,3.695 c0.186,0.521-0.085,1.093-0.605,1.278C12.92,32.014,12.807,32.032,12.695,32.032z"
/>
<path d="M24,12c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S27.309,12,24,12z M24,2c-2.206,0-4,1.794-4,4s1.794,4,4,4 s4-1.794,4-4S26.206,2,24,2z" />
<path d="M29,7H19c-0.552,0-1-0.447-1-1s0.448-1,1-1h10c0.552,0,1,0.447,1,1S29.552,7,29,7z" />
<path d="M24,16c-0.552,0-1-0.447-1-1v-4c0-0.553,0.448-1,1-1s1,0.447,1,1v4C25,15.553,24.552,16,24,16z" />
</svg>

svg / snapsvg creating text that bends

Okay so i am relatively new to both svgand snap.svg.
However i am trying out the different features and how to create all sorts of different text elements.
Normal text is not a challenge however i started wondering how do i make text that actually bends?
Say for instance i want to create a text such as this:
As you can see the text bends.
My Ultimate goal is to use snap.svgto allow the user to bend the text however I'm not quite sure on how to do this.
Has anyone attempted to bend text and is able to point me in the right direction?

SVG is necessary to define a path with curved dimensions.
Here an example:
<svg height="70" width="300">
<defs>
<path id="myTextPath" d="M 30 55 q 100 -46 240 0" />
</defs>
<rect x="0" y="0" height="70" width="300" fill="#292425" />
<text x="10" y="100" style="font-size: 18px; stroke: #E6E6E6;">
<textPath xlink:href="#myTextPath">INVITATION TIL BRYLLUP</textPath>
</text>
</svg>
Update:
And this is a simple example where a user can bend the text, in real time.
Using VanillaJS (Javascript) and Snap.svg.
(function() {
var orientation = document.getElementById("orientation");
orientation.addEventListener("change", function() {
bendText(this.value);
});
function bendText(value) {
var snap = Snap("#myTextPath");
snap.attr("d", "M 30 55 q 100 " + value * -1 + " 240 0");
}
})();
input[type=range][orient=vertical] {
writing-mode: bt-lr;
/* IE */
-webkit-appearance: slider-vertical;
/* WebKit */
width: 8px;
height: 175px;
padding: 0 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<input id="orientation" type="range" orient="vertical" value="46" max="46" min="-46" />
<svg height="70" width="300">
<defs>
<path id="myTextPath" d="M 30 55 q 100 -46 240 0" />
</defs>
<rect x="0" y="0" height="70" width="300" fill="#292425" />
<text x="10" y="100" style="font-size: 18px; stroke: #E6E6E6;">
<textPath xlink:href="#myTextPath">INVITATION TIL BRYLLUP</textPath>
</text>
</svg>
Demo

You can just use a textpath attribute, which takes a path and positions the string along it.
var s = Snap(500,500);
var path = "M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100";
var text = s.text(50,50,'Hi there, Im a textpath that curves along a path string')
.attr({ 'textpath': path })
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
docs

SVG textPath not attached to the linked path after FabricJS import?

I have the following SVG which works fine on it's own: http://jsfiddle.net/bL3k48jn/1/
However, when imported with fabric.loadSVGFromString the text is no long attached to the path, and the font styles are lost.
The SVG
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px">
<path id="textPath" fill="none" stroke-width="5" stroke="yellow"
d="
M 250 -250
m 0, 250
a -250,250 0 1,0 0,500
a 250,-250 0 1,0 0,-500
"
/>
<text fill="black" font-family = "arial" text-anchor="middle">
<textPath startOffset="50%" fill="white" stroke="black" stroke-width="2" font-size="36px" font-weight="bold" xlink:href="#textPath">Happy Birthday Dad!</textPath>
</text>
</svg>
You should see a circle with some text following the bottom edge of the curve.
The code I'm using to import the SVG is here: http://jsfiddle.net/hnzgy940/2/
The Javascript
var canvas = new fabric.Canvas('c');
// This is the SVG as a single line
var str = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="500px" height="500px"><path id="text_path" d="M 250 -250 m 0,250 a -250,250 0 1,0 0,500 a 250,-250 0 1,0 0,-500" fill="none" stroke-width="5" stroke="yellow"/><text font-family="arial" text-anchor="middle"><textPath startOffset="50%" fill="white" stroke="black" stroke-width="2" font-size="36px" font-weight="bold" xlink:href="#text_path">Happy Birthday Dad!</textPath></text></svg>';
fabric.loadSVGFromString(str, function(objects, options) {
svg_text = fabric.util.groupSVGElements(objects, options)
svg_text.set({
originX: 'center',
originY: 'center',
left: canvas.width / 2,
top: canvas.height / 2
});
svg_text.setCoords();
canvas.add(svg_text);
canvas.renderAll();
});
It appears to be ignoring the xlink:href attribute, on the <textPath> element, along with the font styles, which I guess means it might just be ignoring the entire <textPath> element, but I can't see why.
I had a problem previously where the text wouldn't show at all, but I think this may have been because I didn't have the correct xmlns attribute.

Text Paths are not supported yet in Fabric, but there is a branch:
https://github.com/lirmont/fabric.js/tree/Curve-Text
Also, see the conversation:
https://github.com/kangax/fabric.js/issues/729

Categories

Resources