I am using SVG inside React, but the amount of SVG tags that ReactJS allows is limited and I don't see a way to embed an <image/> SVG tag inside my JSX.
I've also tried using a fill style on a rect set to a url of an image, but it doesn't work either. Is there a workaround for this?
SVG Image is now supported in 0.14.
For prior versions, you can use dangerouslySetInnerHTML. For more about that, take a look at this issue:
https://github.com/facebook/react/issues/2069
Related
I'm using the brilliant dom-to-image to capture a screenshot of a d3.js dashboard and download as a png.
I've found it works better than it's competitors - the CSS transfers beautifully - but I've come across a stumbling block.
I have some SVG image elements in my dashboard:
<image x="20" y="20" width="300"height="80"
xlink:href="image/my_image.png"/>
These are either embedded directly onto the svg or as pattern definitions and they are not rendering on the PNG.
This is a know problem and one which has come up on Stack Overflow before but I haven't been able to find a solution. Any thoughts?
In order to get your svg converted to png. Just place your nodeRef in a div and inside that div let your d3.js component be written.Applying nodeRef directly over component will not work.
For me what worked was installing html-to-image and not using dom-to-image
What's the difference between displaying a SVG image in an <img> or <object> tag? I was facing some problems using SVG images in a <img> tag on Android 3.1:
The shape in the upper example is an <img> tag and the lowest example is the exact same image but display in an <object>.
Why is this displayed a different way? And is an <object> cached like an <img>?
What do you guys suggest?
Differences when SVG is used as an image (html <img> SVG <image> or CSS background images)
no scripting
no interactivity
no external dependencies (complete in a single file)
no DOM (i.e. no script access into them from outside)
can be copied into canvas via drawImage
I suspect you're suffering from the no external dependencies rule. You may also want to check that the SVG data has a preserveAspectRatio attribute on the root element and if it does that the value of that attribute is not none.
This is only happening in Internet explorer. I am looking for a solution. I read that ie rasterizes background images or something just like older firefox versions but what are the solutions? Im so desperate. I dont want to serve an inline img image only because of IE.
This is seriously limiting. All other browsers render the SVG 99% the same and accurately.
Use inline image SVGs. If you are concerned that the resource is download by browsers other than IE then use javascript media queries
I've found that deleting the width and height attributes of the svg root (in the svg file itself) helps a little, but not always. You will want to make sure viewBox is defined to retain the aspect ratio.
I have some file written in SVG, I want my javascript code can convert the SVG to VML if it detect the user's browser is IE8,
Is it possible? Many thanks!
There are javascript libraries that will generate VML or SVG automatically depending on what the browser supports, but only if you use that library's methods for creating the svg.
Raphaël is probably the most well-known one.
Yes, svg2vml.js - http://code.google.com/p/svg2vml/
Works well for SVG images.
They are still working on adding svg DOM support for dynamic svg creation and manipulation programatically via js.
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.