I have an html code with svg embedded like this:
<svg id="mysvg" ...
<rect id="myrect" x="10" y="10" width="90" height="90" ... />
...
</svg>
In Javascript, I want the rectangle rotate, so I tried (with JQuery):
$("#myrect").attr("transform", "rotate(45, 50, 50)");
but it doesn't work, even though in the html code, the transform attribute is added to the rectangle. I tried the Element.setAttributeNS() function but it does not work either.
After some study, I learnt the following approach works:
var r = $("#mysvg").get(0).createSVGTransform();
var t = $("#myrect").get(0);
t.transform.baseVal.appendItem(r);
r.setRotate(45, 50, 50);
Although it works, it will be much easier if I can change the transform attribute directly. I don't know if there is any way to do so (I can change other attribute like x and y directly using $().attr()). By the way, the browser I am using is Chrome.
Changing transform using attr seems to work here,..
Have you got more of your code you can show?
$('#myrect').attr('transform', 'rotate(10)');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="mysvg">
<rect id="myrect" x="10" y="10" width="90" height="90"/>
</svg>
Related
I'm trying to put an icon inside an SVG circular graph so that it will display like this: SVG graph example.
No matter what I do, there's always a slight gap between one side of the inner icon and the SVG path that displays like this. I think the issue has to do w/the fact that the arc degree for the SVG circular graph isn't a perfect circle
Here's everything I've already tried:
Created a static png of the inner icon image so that it wasn't a perfect circle + then wrapped the SVG around it
Created SVG in illustrator with the inner icon as a png with two outer paths: one for the grey fill all around and one for the green fill to represent 50%. When I export the file, the d parameter is displaying based on coordinates, not percentages.
<path d="M82,153.53C122.23,153.41,153.2,121,153.46,82,153.69,43.3,122.59,10.94,82,10.49"
fill="none" stroke="#7aef93"
stroke-miterlimit="10" stroke-width="15" />
I started playing around w/this on CodePen, but didn't get very far.
Is this even possible to achieve? I'd really appreciate any and all help/feedback!
This is a fast solution, I don't know is it good. You should add class circle to the second svg like this:
<svg class="circle" width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="60" cy="60" r="59" fill="#F07C7C" stroke="#D0CFCF" stroke-width="2"/>
<rect x="22" y="22" width="75" height="75" fill="url(#pattern2)"/>
<defs>
<pattern id="pattern2" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image2" transform="scale(0.00390625)"/>
</pattern>
<image id="image2" width="256" height="256"
xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
And then you should add this css:
.circle {
position: absolute;
top: 25px;
left: calc(50% - 108px);
}
This should make a second svg inside first svg.
I've tried "react-native-remote-svg" and "react-native-svg-image"; neither of them manage to render the SVG file.
How do I handle SVG in React-native?
Example code:
import SVGImage from 'react-native-svg-image'
const EmailLogo = require('../static/others/Email.svg');
// Render etc....
<ButtonContainer>
<Button bgColor={colors.darkTeal} txtColor={colors.whiteText}
onPress={this.onSignInPress.bind(this)}>
LOG IN WITH
</Button>
<SVGImage
style={{ width: 80, height: 80 }}
source={EmailLogo}
/>
</ButtonContainer>
Result: It's a white square when it should be an email logo.
How does one handle SVG's properly in React-native?
I've been through this struggle. react-native-svg-icon helped me out, but there were some additional things that i had to do, to make it work.
First of all, this library uses react-native-svg underneath. And you need to convert your svg files into SVG objects that this library understands.
If your open your svg file with editor, it will look something like this
<svg xmlns="http://www.w3.org/2000/svg" viewBox="170.5 200.5 18.6 23">
<defs>
<style>.a{fill:#444;}.b{fill:#07b57a;}</style>
</defs>
<g transform="translate(171 201)">
<path class="a" d="M18.1,22.5H-.5V-.5H18.1ZM.5,21.5H17.1V.5H.5Z"/>
<rect class="b" width="5.4" height="1" transform="translate(9 5.4)"/>
<path class="b" d="M4.4,7.3,3,5.9l.7-.7.7.7L6.6,3.7l.7.7Z"/>
<rect class="b" width="5.4" height="1" transform="translate(9 10.5)"/>
<path class="b" d="M4.4,12.4,3,11l.7-.7.7.7L6.6,8.8l.7.7Z"/>
<rect class="b" width="5.4" height="1" transform="translate(9 15.6)"/>
<rect class="b" width="2.5" height="1" transform="translate(3.2 15.6)"/>
</g>
</svg>
You need to convert it to something like this
entry: {
svg: (
<G transform="translate(171 201)">
<Path fill="#444444" d="M-152.4-178H-171v-23h18.6V-178z M-170-179h16.6v-21H-170V-179z" />
<Rect x="-161.5" y="-195.1" fill="#07B57A" width="5.4" height="1" />
<Path
fill="#07B57A"
d="M-166.1-193.2l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-193.2z"
/>
<Rect x="-161.5" y="-190" fill="#07B57A" width="5.4" height="1" />
<Path
fill="#07B57A"
d="M-166.1-188.1l-1.4-1.4l0.7-0.7l0.7,0.7l2.2-2.2l0.7,0.7L-166.1-188.1z"
/>
<Rect x="-161.5" y="-184.9" fill="#07B57A" width="5.4" height="1" />
<Rect x="-167.3" y="-184.9" fill="#07B57A" width="2.5" height="1" />
</G>
),
viewBox: '0 0 18.6 23',
}
This is a representation of the svg file in components of react-native-svg library. One thing you need to pay attention here, is viewbox of the svg file. I am not sure why, but most of the time, it is 'off center'. I will show in screenshots below. Because of that, it cannot be displayed by the react-native-svg-icon as well. To bring it to center you can use Adobe Illustrator, or some other online tool to edit svg. One i used is http://editor.method.ac/. So, I uploaded my svg, recentered it and downloaded it again. and used that svg file to create object in my react native code.
This is my initial svg file that i uploaded to the service. if you zoom out and press cmd+a (or ctrl+a) to select all, it will highlight svg icon, like in screenshot below. You should position it to the white part, either by dragging it, or by setting X and Y on top right corner to 0s.
This is how it will look when centered
Once you save that svg file, use it to convert it to javascript object with react-native-svg components, more info on that can be found here
Once you create you svg objects, you can use it with react-native-svg-icon. You will find how to do that in the link I shared above.
I know, this is a lot of pain and seemingly over complicated, and I spent quite some time to make it work, but it is the only way I managed to accomplish it.
One other option would be to convert your svgs into font icons with icomoon.com and use it with react-native-vector-icons. but it will only work if your svgs are drawn with only one color, as multicolored ones cannot be converted to fonts
P.S. I didn't try, but maybe, libraries that you tried to use might work with centered svg file that we got from online service. Let me know if it works, then it can be helpful to other users as well.
react-native-svg-image and react-native-svg-image uses WebView to render SVG files so it do not support local files at the moment. Its written it the docs.
Use react-native-svg-uri to render SVG images in React Native from an URL or a static file. to use react-native-svg-uri you will need to link react-native-svg as well. So read docs carefully.
I'm using Knockout to render dynamic SVG's by passing strings into an SVG data-bound with the html: binding. In Chrome this works perfectly. In Firefox it will set up the DOM correctly (i.e. I can see that the child svg elements are present in firebug) but the graphic itself is not displayed.
I made a fiddle: https://jsfiddle.net/4eTJL/1/ but interestingly, the Firefox behavior shows in both browsers in the fiddle.
<svg> tag has no innerHTML property, that's why ko html binding doesn't work, but you can avoid this problem by putting all svg content inside logo variable, then bind it to a standard html tag.
https://jsfiddle.net/4eTJL/2/
<div data-bind="html: logo"></div>
var vm = {
logo: '<svg viewBox="0 0 50 50" class="center-block" xmlns="http://www.w3.org/2000/svg" width="80" height="80" data-bind="xml: logo"><rect ry="8" rx="8" id="svg_2" height="50" width="50" y="0" x="0" stroke-width="5" fill="#bfbfbf"></rect><text font-family="Graduate" textLength="40" lengthAdjust="spacingAndGlyphs" text-anchor="middle" x="25" y="37" font-size="33" fill="crimson" stroke="black" stroke-width="1.25">NO</text></svg>'
};
ko.applyBindings(vm);
I got this little SVG grid
<svg id="grid-svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="#000000" stroke-width="0.7" />
</pattern>
<pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
<rect width="100" height="100" fill="url(#smallGrid)" />
</pattern>
</defs>
<rect x="-100%" y="-100%" width="200%" height="200%" fill="url(#grid)" />
</svg>
I got it in a template html. Because I don't want it to remain in the main page for a reason.
Then I just clone that piece of SVG, create a wrapper div, and append the grid-svg to it.
Then I apply the grid dynamically with jQuery.
It works for Chrome and Firefox, but it doesn't work for IE 10 and IE 11.
Do you know why?
Thanks.
I am using the SVG using D3.js and i had the same issue.
I wrote the below code to resolve the issue
$('#lineChartSVG g').remove();
$('#lineChartSVG path').remove();
here i am removing the previous g and path, replacing with the new one.
Keep your tags in the static content and then call the above code where you used your code. This should work
This was solved already, i was doing a jquery clone() to get it from the template, which is wrong. Now it works fine.
I have some pattern in svg that I applied to my rect, the code is like this
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" style="position:absolute; top:0px; left:0px">
<defs>
<rect id="unitsqr" fill="#DBDBDB" stroke="white" stroke-width="1px" x="0" y="0" width="12" height="12"/>
<pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
<use xlink:href="#unitsqr" />
</pattern>
</defs>
<rect fill="url(#grid)" x="0" y="0" width="100%" height="100%"/>
</svg>
I want to do some animation in raphael but also keep my grid , I don't get any clue on how to create a pattern in raphael and use it as a fill later. Is there a way to do that anyway?
When you do Element.attr("fill", "http://example.com/example.png") Raphaël creates a <pattern> element for you under-the-hood if the SVG backend is used. But there's no highlevel API support in Raphaël for creating and manipulating pattern fills. So, either you'll need to extend Raphaël or you can do it with plain js assuming you don't care about the VML fallback for IE8 and lower.
The correct syntax would be
Element.attr("fill" , "url(http://exmaple.com/example.png)") ;
You can do funky stuff like filling creating an image shaped like a circle or a path easily by creating an element using Raphael.path or Raphael.circle and setting the fill to a url.