I've run into an issue on older versions of firefox, (in particular 38.2.1)
where a D3 animation of and SVG component results in rendering issues ( looks like its just not repainting the background).
a Minimal example below
https://jsfiddle.net/4n2f9g81/2/
<svg width="600" height="600">
<g transform="translate(36, 24)">
<g class="group" transform="translate(200)" >
<circle class="circle" fill="white" r="20" stroke-width="2" stroke="#7ab800"></circle>
<g class="label" >
<line y1="-25" y2="-40" stroke="#7ab800" stroke-width="1" shape-rendering="crispEdges"></line>
<text text-anchor="middle" class="peer-label position" y="-45" style="-moz-opacity:0">label text</text>
</g>
</g>
</g>
</svg>
d3.select('.group').transition().duration(5000).attr("transform", "translate(0,100)");
It only occurs when the g element with the class label has some content.. if it's empty or hidden there's no corruption and the animation works fine. since it works in more recent version (and in other browsers) I assume I've hit a firefox bug which has since been resolved.
I'd like to know if there's a workaround for this on these older versions. I've tried a couple of things like forcing a background fill or forcing opacity, but not had any success as yet.
Related
im using svgPicture to show the image and every time at first it showing error and then it showing image.
SvgPicture.asset(
'assets/Images/otpLogo.svg',
height: SizeConfig.blockSizeVertical * 26,
),
and the error is
══╡ EXCEPTION CAUGHT BY SVG ╞═══════════════════════════════════════════════════════════════════════
I/flutter (18256): The following assertion was thrown in _getDefinitionPaint:
I/flutter (18256): Failed to find definition for url(#paint0_linear)
I/flutter (18256): This library only supports and xlink:href references that are defined ahead of their
I/flutter (18256): references.
I/flutter (18256): This error can be caused when the desired definition is defined after the element referring to it
I/flutter (18256): (e.g. at the end of the file), or defined in another file.
I/flutter (18256): This error is treated as non-fatal, but your SVG file will likely not render as intended
I'm not sure if this is the exact problem since you did not provide the code to the SVG file but according to the error message, it says:
This error can be caused when the desired definition is defined after the element referring to it...
For me, anyway, the solution was to edit the SVG file and move the <defs> tag and all its contents up to just below the opening of the <svg> tag.
You can improve and optimize your SVG code structure by using this online tool. Then simply cut and paste the defs as explained above.
Nonetheless, there is still an open issue in the repo about this particular problem.
Sample Case:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" fill-rule="evenodd" transform="translate(8 6)">
<mask id="prefix__b" fill="#fff">
<use xlink:href="#prefix__a"/>
</mask>
<g fill="#FFF" mask="url(#prefix__b)">
<path d="M0 0H24V24H0z" transform="translate(-8 -6)"/>
</g>
</g>
<defs>
<path id="prefix__a" d="M7.705 1.41L6.295 0 0.295 6 6.295 12 7.705 10.59 3.125 6z"/>
</defs>
</svg>
Fixed version:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="prefix__a" d="M7.705 1.41L6.295 0 0.295 6 6.295 12 7.705 10.59 3.125 6z"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(8 6)">
<mask id="prefix__b" fill="#fff">
<use xlink:href="#prefix__a"/>
</mask>
<g fill="#FFF" mask="url(#prefix__b)">
<path d="M0 0H24V24H0z" transform="translate(-8 -6)"/>
</g>
</g>
</svg>
Note: Notice the changing position of the defs tag.
Before in my svg file:
<svg>
<g>
...
</g>
<defs>
...
</defs>
</svg>
After in my svg file:
<svg>
<defs>
...
</defs>
<g>
...
</g>
</svg>
Move <defs></defs> to up!
Some informations about this behaviour.
This can occur if you export from Figma for exemple.
And be sure to put <defs></defs> just after the <svg opening tag. Even if you have something like <path at the top
I ran into the same thing after downloading SVG from Figma.
Then I tried to
Download a PNG file from Figma
Import it into Adobe XD
Then Export it to SVG from Adobe XD.
And this worked for me.
The error means that the SVG was not exported correctly. The layer in question connected to the user might not render as intended.
The successful rendering really depends on each individual device so if it shows correctly for e.g. iOS Simulator does not necessarily mean it will render correctly on every device (and in my experience, it doesn't).
The solution might be to try to export it differently, or if possible to switch it for example to PNG.
The error message actually tells us how to fix it:
Failed to find definition for url(#g1)
This library only supports <defs> and xlink:href references that are defined ahead of their references.
That means if your svg is :
<svg>
<rect fill="url(#g1)"/>
<defs>
<radiusGraident id="g1"> ... </radiusGradient>
</defs>
</svgs>
Please make the <defs> ahead of its usage. So the below svg would work :
<svg>
<defs>
<radiusGraident id="g1"> ... </radiusGradient>
</defs>
<rect fill="url(#g1)"/>
</svgs>
If the rearranging defs to the top solution doesn't work, just remove the pattern, rect and defs tag and only leave the image tag
if you have png from svg image then follow these steps:
1- Convert png to svg through this link: https://express.adobe.com/pt-BR/tools/convert-to-svg
2-After converting png to svg, insert it into your project.
3- If the background of the image does not have transparency, open the image file in the IDE (Android Studio or Visual Studio), showing the image code, go to the third line or close to it, change the option "opacity" to opacity=" 0"
When using the Flutter SvgPicture package, I fall into the same problem.
I solve this issue by exporting the file from Figam as PDF and then converting the pdf file to SVG.
Here are the steps I follow:
Save as (.pdf) from Figma/Adobe XD.
Go to Zamzar and convert the PDF file into SVG Image.
Use this image & Boom !!!
The problem is solved !!!
I'm working on a drawing app that uses a background image. The container and background image are scaled with the browser window.
However, the lines that are drawn are not scaling with the container/background. So something that goes from 1,1->50,50 on a 100x100 drawing, ends up going all the way across the image if the browser scales the image down by 50%.
Is there are markup for paths that enables such scaling to work (example svg below).
I've tried preserveAspectRatio and setting the viewBox.
<svg>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="./background.svg" height="100%" width="100%"></image>
<g>
<path class="shot" d="M243,190 L650,199"></path>
<path d="M242.77892382381336,199.9975559675514 L649.7789238238133,208.9975559675514" class="shot-parallel"></path>
</g>
<g class="active">
<path class="shot" d="M269,321 L411,368"></path>
<path d="M265.8577860915356,330.49349734046694 L407.8577860915356,377.49349734046694" class="shot-parallel"></path>
</g>
</svg>
Example here
<svg width="978px" height="668px" viewBox="0 0 978 668" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="top" width="1" height="1" viewBox="0 0 717 478" preserveAspectRatio="xMidYMid slice">
<image xlink:href="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" width="717px" height="478px"></image>
</pattern>
</defs>
<g>
<path d="M1,95.0771484 L1,0 L979,0 L424.030762,379.068604 L1,95.0771484 Z" fill="url(#top)"></path>
</g>
</svg>
Open in Firefox to see image stretched (undesired effect)
Open in Chrome to see image sliced (desired effect)
I read Crop to fit an svg pattern, which was close to solving the problem.
It appeared to work only on 'circle's #2 and #3.
When I applied my 'path', image got stretched again.
They mention a Firefox bug, but it is marked as 'fixed'.
How can I get my image sliced across browsers?
This is fixed from Firefox 40 onwards by bug 1047973. I think that's currently available as Firefox developer edition but will be out in the production version on 11th August 2015
I want to create a keyframe simulation using SVG, the idea is that the objects in the animation/simulation have particular positions (or line lengths) at particular times. So for example, I may have divided the 1-minute simulation into 60 1-second intervals. I want to do three things:
(a) be able to play the 60-frame simulation frame by frame
(b) be able to select any frame by clicking on a frame button (imagine 60 small rectangles at the bottom of the screen, each representing a particular frame)
(c) be able to step forwards or backwards from a given frame
What would be good ways to do this using SVG?
For example, imagine I have two circles moving around. At each time T (from 1 to 60) each of the circles has a location and radius and visibility (it might be invisible during one or more frames). How do I structure the SVG file?
Note that I would like to avoid using Javascript (ECMA) to do this. I am hoping for a pure SVG solution.
I fear you might be out of luck doing this without JavaScript. In theory, it's perfectly possible to do with SMIL animation, unfortunately support is not so good or at least very inconsistent. If you want to try anyway or if you're happy to make it work in a specific browser, this might give you a starting point:
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="230">
<!-- some moving circle -->
<circle cx="50" cy="50" r="50">
<set id="a0" attributeName="cy" to="50" begin="start.click; r0.click"/>
<set id="a1" attributeName="cy" to="75" begin="a0.begin+1s; r1.click"/>
<set id="a2" attributeName="cy" to="100" begin="a1.begin+1s; r2.click"/>
<set id="a3" attributeName="cy" to="125" begin="a2.begin+1s; r3.click"/>
</circle>
<!-- Rects to address certain frames -->
<g fill="#d44">
<rect id="r0" width="20" height="20" y="180"/>
<rect id="r1" width="20" height="20" y="180" x="30"/>
<rect id="r2" width="20" height="20" y="180" x="60"/>
<rect id="r3" width="20" height="20" y="180" x="90"/>
</g>
<!-- Play button-->
<polygon id="start" points="40,210 70,220 40,230" fill="#6d6"/>
</svg>
This attempts to solve your points (a) and (b), but I think it only works as intended in classic non-Blink Opera. I'm not sure whether FakeSmile can help you get more consistent behavior.
Hi everybody i need to animate an svg. It works perfectly in chrome, firefox and safari too, but naturally it don't work on Internet Explorer.
This is my code
<g>
<path fill="none" d="M254.587,356.68
c0-31.728,25.72-57.448,57.448-57.448c31.728,0,57.448,25.721,57.448,57.448c0,31.728-25.721,57.448-57.448,57.448
C280.307,414.128,254.587,388.408,254.587,356.68">
<animate id="cerchio" attributeName="stroke-dashoffset" from="0" to="0" dur="3s"
begin="startAnimation1.click+1.0s"
fill="freeze" keySplines="0 0 0 0" calcMode="linear"/>
</path>
</g>
I tried to use svgweb but it seems don't work with stroke-dashoffset attributeName.
Any ideas?
IE9 supports SVG. Use VML for IE8 and below.
To check if your browser supports SVG or VML take a look at this answer.