https://github.com/salgum1114/react-design-editor/blob/8db73ef3d9846444e25657a5414b417633b1ef0e/src/components/Canvas.js
I have gone through the code on the above link. But I can't seem to understand Line 495 where its written this.canvas.wrapperEl as it is not defined anywhere.
This is a reference to the wrapper div element that fabric.js wraps around the actual canvas it draws on. This property is intended for internal use, that's why there is no mention of it in the docs.
If you inspect the HTML on a page that uses a fabric.js canvas in it, you'll see something like this:
<div class="canvas-container" style="...">
<canvas id="c" width="1000" height="800" class="lower-canvas" style="..."></canvas>
<canvas class="upper-canvas" width="500" height="400" style="..."></canvas>
</div>
The canvas-container div is your wrapperEl.
Related
I'm trying to wrap text automatically since I won't know what the text is ahead of time.
I tried using the accepted answer in this question, but nothing shows up. Here is my sample code so far:
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<switch>
<g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">
<textArea width="200" height="300">whatever</textArea>
</g>
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</switch>
</svg>
I am rendering this SVG in FireFox (since its part of a web page).
Firefox implements some parts of SVG 2 and dropping support for requiredFeatures is one part of SVG 2 that it has implemented.
Previous versions of SVG included a third conditional processing attribute, requiredFeatures. This was intended to allow authors to provide fallback behavior for user agents that only implemented parts of the SVG specification. Unfortunately, poor specification and implementation of this attribute made it unreliable as a test of feature support.
That means that the first part of the switch now applies when at the time I wrote the answer to the other question, it didn't. The answer is to remove the switch and the first element as nobody implements SVG 1.2 textArea any more.
<svg id="viz" style="margin:auto; position:fixed; height:100%; width:100%;" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="200" height="300">
<textArea xmlns="http://www.w3.org/1999/xhtml" style="width: 200px;height: 300px">otherwise</textArea>
</foreignObject>
</svg>
Sorry if that might come an opinion-based, but I hope there's a right answer..
Where an inline CSS style should be placed inside an SVG document? In the
example I provide below I have defined two styles and a circle that uses them.
The first style is defined inside defs tag and the second styles is defined right inside the svg tag.
Both styles are successfully displayed on the circle (at least in Chrome they do, didn't check other browsers though).
My question is which way is more standard?
I think keeping styles in defs keeps the whole SVG more tidy. However, one can claim that I should not use defs tag since no one references the style with <use>
Thanks!
<svg height="100" width="100">
<defs id="someDefs">
<style id="style1">
.blue-fill {
fill : blue;
}
</style>
</defs>
<style id="style2">
.red-stroke {
stroke : red;
stroke-width : 12
}
</style>
<circle cx="50" cy="50" r="40" class="blue-fill red-stroke" />
</svg>
It doesn't matter. Neither approach is "more standard". <style> elements are not renderable anyway, so there is no real need to put them in the <defs> section
As commented by Paul LeBeau.
After reading this article about style on MDN, that shows an example of a style simply under the SVG root, I am more convinced it is correct to put <style> there rather than under <defs>.
Also, since <defs> tag is indeed for reusable graphical elements that should be rendered, and <style> is not a renderable element, there's no point keeping it there.
Graphical elements defined in <defs> are not rendered directly and will be rendered only with use. Hence it is always a good practice to use <defs> if the graphical object is defined for later use. It also increases the readability of the code.
More Information
I want to add multiple lines of text to an svg, which would be contained within the svg (does not overflow). How can I do that?
I knew that the text tag is used in svg, but I discovered that it's single lined. Then, when I give it textLength (so that it would contained in specific svg), its words overlap with each other. How can I put multiple lines of text which would adjust in svg tag? The code I tried is below:
<svg width="200" height="60" style="border: 1px solid black;">
<text x="10" y="30" textLength="180" style="font-size: 30px;">The paragraph here</text>
</svg>
It doesn't work. SVG has no mechanism for breaking lines.
That said, you would be able to encapsulate a html <p> tag as a foreignObject:
<svg xmlns="http://www.w3.org/2000/svg"
width="21cm" height="29.7cm" style="border:1px solid black;">
<foreignObject x="6.4cm" y="3.6cm" width="10cm" height="10cm">
<p xmlns="http://www.w3.org/1999/xhtml"
style="font-size:48px;">The paragraph here</p>
</foreignObject>
</svg>
Please note that the namespace declarations must be given, and you need to write valid XHML for this to work.
In addition, foreignObject is part of the SVG context, so a width and height need to be set, otherwise it will have no inherent size.
I'm making SVG effects by combining 2 identical photos with alternate slits. When you look closely, there are dotted lines 45 degree across the whole images. Referencing this question, I already tried the option shape-rendering="optimizeQuality", shape-rendering="geometricPrecision" and shape-rendering="auto" on <polygon> tags, but the dots still appears.
How do I remove the tiny dots?
Partial HTML codes (full code is too long to post here, see JSFiddle below for full CSS, JS and HTML codes):
<div class="image_wrapper">
<svg id="svg-1" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
<div class="image_wrapper2">
<svg id="svg-2" class="clip-svg">
<image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
</svg>
</div>
JSFiddle demo is here
The dots are caused by anti-aliasing of the polygons that you are using for the diagonal slit clipping paths.
IMO there isn't any way to prevent that. It may or may not get better if you turn anti-aliasing off with `shape-rendering="optimizeSpeed". And even if that works on one browser, it may not work on other ones.
My suggestion is to just have a complete ("un-slitted") version of the image on top. Make it invisible initially, then show it once the animation has finished.
I am trying to stretch an svg document inside an DOM in order to fit the window size.
like so:
<div id="y">
<div id="button"> click to zoom</div>
<embed id="x" src="s17.svg" >
<script>
var btn= document.getElementById("button");
btn.addEventListener('click',function(){
var z= document.getElementsByTagName("embed")[0];
var y = z.getSVGDocument();
y.lastChild.setAttribute("viewBox","0 0 "+window.innerWidth+" "+window.innerHeight);
},false);
</script>
</div>
css:
#x{
height:100%;
width:100%;
overflow:hidden;
}
#y{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
}
This isn't working... What am I doing wrong?
All browsers should be able to handle this just fine:
add a viewBox to the svg element (s17.svg in your example) without using script if possible
remove the width and height attributes on the svg element if they are specified
add an attribute preserveAspectRatio="none" to the svg element to make it stretch even if the css-viewport aspect ratio doesn't match the viewBox aspect ratio.
set the width/height of the embed/iframe/object to whatever you want and the svg will automatically stretch to fit
If you don't want stretching then you can also do preserveAspectRatio="xMidYMid slice" (fill whole viewport, slicing away parts if necessary) or preserveAspectRatio="xMidYMid meet" (this is the default, center the svg in the viewport and maintain the aspect ratio).
All browsers handle SVG support completely differently. I think your best bet is to use an object tag instead of embed, and you still have to do some hacking to get it to look right on each browser. This link and this link have some useful information for getting it to work cross-browser.