I have this code for inline svg icon:
#Icon = React.createClass
render: ->
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>img</title>
<g stroke-width="2" stroke="#0070D9" fill="none" fill-rule="evenodd">
<path d="M2 1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
<path d="M1.652 14.514l4.956-6.279 5.448 5.579 6.398-5.579M13 3.95a2.05 2.05 0 1 1 0 4.1 2.05 2.05 0 0 1 0-4.1z"/>
</g>
</svg>
But react skip all properties with -, like: stroke-width="2"
Use camelCase. For example: strokeWidth instead of stroke-width. I've made a fiddle with working example.
Related
How can I draw half of ellipse in SVG? What I'm trying to do
<path d="M 198, 160 a 50,20 1 1,0 1,0" fill="pink" style="fill:pink;stroke:black;stroke-width:1;"/>
You already found the right command for your path; the elliptical arc curve.
In these examples I created half-ellipses with the same dimensions. You can see the two numbers after the A are all 10 and 2. 10 is the x radius and 2 the y radius. The two numbers after M are all stating points and the two numbers just before Z are the end points. The three numbers in between (0 0 0 and 0 0 1) are different flags. The only one I use here is the sweep-flag that indicates clockwise or anticlockwise.
A usefull tool that I use a lot for creating paths is this: SvgPathEditor.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 8">
<path transform="translate(0 0)" fill="blue" d="M 10 0 A 10 2 0 0 0 10 4 Z"/>
<path transform="translate(10 0)" fill="pink" d="M 0 0 A 10 2 0 0 1 0 4 Z"/>
<path transform="translate(0 4)" fill="orange" d="M 0 2 A 10 2 0 0 1 20 2 Z"/>
<path transform="translate(0 6)" fill="lime" d="M 0 0 A 10 2 0 0 0 20 0 Z"/>
</svg>
Can you help me align the icon into the middle of the circle?
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M11.5 4a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17zM2 12.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0zm9 2v-7h1v7h-1zm0 3V16h1v1.5h-1z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24">
<g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M7.92 2.514A1 1 0 0 1 8.794 2h1.412a1 1 0 0 1 .874.514l7.209 12.977a1 1 0 0 1-.042 1.04l-.683 1.024a1 1 0 0 1-.832.445H2.267a1 1 0 0 1-.832-.445L.753 16.53a1 1 0 0 1-.042-1.04l.437.242-.437-.242L7.92 2.514zM10.206 3H8.794L1.585 15.976 2.267 17h14.465l.683-1.024L10.205 3zM9 12.5V7h1v5.5H9zM9 15v-1.25h1V15H9z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 24 24"><g>
<circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#545454"/>
<path fill-rule="evenodd" d="M9.5 4a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM2 10.5a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0z" clip-rule="evenodd" fill="#FFF"/><path fill-rule="evenodd" d="M9 14.75V13.5h1v1.25H9zM9.5 7A1.5 1.5 0 0 0 8 8.5H7a2.5 2.5 0 1 1 3.118 2.423.221.221 0 0 0-.104.058.07.07 0 0 0-.014.02v1.249H9V11c0-.574.457-.94.872-1.046A1.5 1.5 0 0 0 9.5 7z" clip-rule="evenodd" fill="#FFF"/>
</g>
</svg>
I have the following svg icon that I want to change the color of to #2F855A:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" fill="#2F855A" d="M8.7 14.7a1 1 0 0 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L12 11.42l-3.3 3.3z"/>
</svg>
How do I do that?
.icon{
width:100px;
height:100px;
}
<svg class="icon" fill="none" stroke="#2f2f2f" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
You need to use stroke attribute on svg. You can choose any value you want. for example stroke="#2f2f2f will set the color as dark gray.
I've tried to fill this SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
<defs>
<style>
.cls-1{fill:#d1d1d1}
</style>
</defs>
<path id="iconfinder_heart_226577" d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z" class="cls-1" transform="translate(-1.372 -7.999)"/>
</svg>
With color in the middle, but I was only able to change the color of the stroke.
I've tried a lot of answers here but I didn't understand what I'm doing wrong.
<svg xmlns="http://www.w3.org/2000/svg" width="23.15" height="20" viewBox="0 0 23.15 20">
<defs>
<style>
.cls-1{
fill:#EB6320;
stroke: none;
type: path;
}
</style>
</defs>
<path
id="iconfinder_heart_226577"
d="M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z"
class="cls-1"
transform="translate(-1.372 -7.999)"/>
</svg>
That is because there is another heart drawn on the inside. It is the last half of the path:
-4.213 9.83l-5.617 5.617-5.617-5.617-2.808-2.808a3.972 3.972 0 0 1 5.617-5.617l2.808 2.809 2.809-2.809a3.972 3.972 0 0 1 5.617 5.617z
Replace your path with just the beginning and it should work fine:
M22.777 9.744a5.957 5.957 0 0 0-8.425 0l-1.4 1.4-1.4-1.4a5.958 5.958 0 0 0-8.435 8.426l1.4 1.4 8.43 8.43 8.426-8.426 1.4-1.4a5.958 5.958 0 0 0 .004-8.43zm
Can someone please tell me, why the left arrow head in the following file shows correctly in the generated PNG, but not in the browser?
https://commons.wikimedia.org/wiki/File:SVG_double_arrow_with_marker-start_and_marker-end.svg
In Firefox it is just not there, and in Chrome I see it pointing to the bottom right instead of left.
These are the two markers:
<marker id="arrowend" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto">
<path d="M 0 0 C 0 0, 3 5, 0 10 L 0 10 L 13 5" fill="red"/>
</marker>
<marker id="arrowstart" viewBox="0 0 -13 -10" refX="-2" refY="-5" markerWidth="-3.5" markerHeight="-3.5" orient="auto">
<path d="M 0 0 C 0 0, -3 -5, 0 -10 L 0 -10 L -13 -5" fill="red"/>
</marker>
My solution based on the hint below:
<marker id="arrowstart" viewBox="0 0 13 10" refX="11" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto">
<path d="M 13 0 C 13 0, 10 5, 13 10 L 13 10 L 0 5" fill="red"/>
</marker>
So I changed the actual path. All my attempts to just mirror it failed, so for me this was the best solution.
This is where I put it in action, BTW: https://commons.wikimedia.org/wiki/Category:Full_octahedral_group;_single_elements;_signed_perm_mat,_perm_mat_and_cube
A viewBox with negative width and height is invalid. The contents of invalid viewBoxes do not render.
If Chrome renders arrowstart in any way, that's a Chrome bug. Whatever png generator you're using is clearly also buggy.
Here's one way to get the arrows on both ends, at least on browsers that support orient="auto-start-reverse"
<svg width="500" height="300" viewBox="0 0 200 50">
<defs>
<marker id="arrow" viewBox="0 0 13 10" refX="2" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto-start-reverse">
<path d="M 0 0 C 0 0, 3 5, 0 10 L 0 10 L 13 5" fill="red"/>
</marker>
</defs>
<line x1="25" y1="25" x2="175" y2="25" stroke="red" stroke-width="5" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
</svg>