I am trying to create tick Inside filled circle.
I did following but, doesn't looks perfect.
<svg height=10 viewBox="0 0 10 10" width=10>
<g fill="none" stroke="#22AE73" stroke-width="1"></g>
<circle cx=5 cy=5 fill='#29AB87' r=5 />
<polyline stroke="#ffffff" stroke-width="2" points="2.5,5.8 4.7,7.9 9.2,2.4 " />
</svg>
Any help would be greatly appreciated.
Your points are reaching the 10 10 part of your viewbox, hence it doesn't fit. You could change your points to lower values.
Alternatively, here's an svg that might work for you that is path based
<svg width="10px" height="10px" viewBox="0 0 10 10" >
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="tick">
<circle id="Oval" fill="#349006" cx="5" cy="5" r="5"></circle>
<path d="M7.26241838,2.25 L8.35843389,3.34601551 L3.9390165,7.76543289 L3.937,7.763 L3.93041937,7.77093389 L1.65,5.49051452 L2.74601551,4.39449901 L3.932,5.58 L7.26241838,2.25 Z" id="Combined-Shape" fill="#FFFFFF"></path>
</g>
</g>
</svg>
Related
The SVG code of Material design Hamburger menu icon:
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>
However it always could be some reason I can not use the Material Design icon and need to create my own one. But how I can reach such simple code? One path.
Tried to draw the similar icon in AbodeXD. The output SVG code was:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="18" viewBox="0 0 26 18">
<defs>
<clipPath id="clip-アートボード_1">
<rect width="26" height="18"/>
</clipPath>
</defs>
<g id="アートボード_1" data-name="アートボード – 1" clip-path="url(#clip-アートボード_1)">
<line id="線_1" data-name="線 1" x2="26" transform="translate(0 0.5)" fill="none" stroke="#000" stroke-width="1"/>
<line id="線_2" data-name="線 2" x2="26" transform="translate(0 17.5)" fill="none" stroke="#000" stroke-width="1"/>
<line id="線_3" data-name="線 3" x2="26" transform="translate(0 9)" fill="none" stroke="#000" stroke-width="1"/>
</g>
</svg>
The SVG optimization reduced above code to:
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="18">
<defs>
<clipPath id="a">
<path d="M0 0h26v18H0z"/>
</clipPath>
</defs>
<g data-name="アートボード – 1" clip-path="url(#a)" fill="none" stroke="#000">
<path data-name="線 1" d="M0 .5h26"/>
<path data-name="線 2" d="M0 17.5h26"/>
<path data-name="線 3" d="M0 9h26"/>
</g>
</svg>
But it a more complicated than Material Design SVG. Also, we can't change the icon color by like fill: red as many other icons.
Path syntax is easy to understand - let's break it down:
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
M3,6 - Move the drawing point to coordinates [3,6]
H21 - draw a Horizontal line to coordinates [21,Current Y Coordinate (6)]
V8 - draw a Vertical line to coordinates [Current X Coordinate (21), 8]
H3 - draw a Horizontal line to coordinates [3,Current Y Coordinate (8)]
V6 - etc.
M3,11 - Move the drawing point to coordinates [3,11]
... etc
Z - Draw a line to the start of the current subpath (the coordinates of the last MoveTo - which in this case, doesn't do anything, because we're already at those coordinates)
So if you want the hamburger menu to be in a smaller viewBox, you can edit the path by hand like so:
<svg style="width:20px;height:20px" viewBox="0 0 20 20">
<path fill="currentColor" d="M1,4 H18 V6 H1 V4 M1,9 H18 V11 H1 V7 M3,14 H18 V16 H1 V14" />
</svg>
Please Use stroke="red" rather than using Fill="red"
Please find the Below updated code:
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="18">
<defs>
<clipPath id="a">
<path d="M0 0h26v18H0z"/>
</clipPath>
</defs>
<g data-name="アートボード – 1" clip-path="url(#a)" fill="none" stroke="red">
<path data-name="線 1" d="M0 .5h26"/>
<path data-name="線 2" d="M0 17.5h26"/>
<path data-name="線 3" d="M0 9h26"/>
</g>
</svg>
I'm a beginner in animation. I am trying to learn svg animation from the following piece of code.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200">
<path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path>
<path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(-90)" style="fill: #ff0000;">
<animateMotion path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
</path>
<g>
<desc>white mask</desc>
<rect x="90" y="80" width="15" height="65" fill="white" />
<rect x="65" y="105" width="65" height="15" fill="white" />
</g>
</svg>
I'm tring to move the arrow to rotate in opposite direction (i.e anticlockwise) but unable to achieve that. I have tried to change the path but I'm stuck at this point.
Any help will be appreciated.
We can use keyTimes and keyPoints to run the animation backwards and alter the transform to rotate the arrow. See how the keyPoints go from 1 to 0.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200">
<path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path>
<path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(90)" style="fill: #ff0000;">
<animateMotion keyPoints="1;0" keyTimes="0;1" path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
</path>
<g>
<desc>white mask</desc>
<rect x="90" y="80" width="15" height="65" fill="white" />
<rect x="65" y="105" width="65" height="15" fill="white" />
</g>
</svg>
Is it possible to put an outline or something on a mask so that you can actually see where the mask is? I have an element that I'm trying to mask, but I can't actually see if lining up to where it should.
What I'm trying to do is use the endScreen ID as a mask and using the startOrder ID for the object being masked. Right not it's masking it, but not correctly and it would be nice to visibly be able to see the mask where it is in the design.
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<style>
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
</style>
<defs>
<mask id="button-mask" width="1" height="1">
<path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
</svg>
Define the path you want to use for the mask first as a template by itself, without any presentation attribute, and then reference it twice: first, inside the mask with fill="white", and then again with fill="none" stroke="blue" on top off your grafic.
You'll note your path isn't closed, but obviously a fill will create an implicit close between the endpoints, which the stroke doesn't show. An easy solution that changes effectively nothing for your mask is to add a z command at the end of the path definition.
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<defs>
<path id="shape" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
<mask id="button-mask" width="1" height="1">
<use href="#shape" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
<use href="#shape" fill="none" stroke="blue" />
</svg>
It might be worth noting that this is a solution only fitting for your specific situation. If the mask had a stroke defined, another stroke around that one cannot be shown like that. Effectively, the technique is more fit for a clip-path (that is pure form) than a mask (which is a arbitrary grafical structure).
I have an SVG with a path that I am trying to mask out.
I have a circle tag with an id of startCircle and a path with an id of startOrder. The circle one is working, the path is not, but I'm not sure why.
<svg id="wawa" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<style>
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
</style>
<defs>
<mask id="button-mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="#fff" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25"/>
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<circle id="startCircle" cx="110" cy="110" r="100" fill="#9c6" mask="url(#button-mask)" />
</svg>
I set up a pen to show what I am talking about
codepen
The answer is in the TweenMax library you are including:
TweenMax.set( '#startOrder',{x:"+=100"});
This moves the #startOrder 100 px to the right by setting a
transform="matrix(1,0,0,1,100,0)"
Transforms are applied after masks (they are always the last operation), and before the translation the path lies completely within the mask shape.
You can solve this by moving the path inside a group and applying the mask to the group:
<g mask="url(#button-mask)">
<path id="startOrder" ... />
</g>
Live reproduction: https://codepen.io/alexcheninfo/pen/dZqmLv
This is the SVG:
<svg class="line-chart" width="860" height="405"></svg>
This is the CSS of the container:
.common-section {
position: relative;
width: 100%;
background-color: red;
margin-bottom: 30px;
}
Screenshot:
Two things:
You are missing the viewBox attribute.
Adding preserveAspectRatio="xMidYMid meet" will maintain the original aspect ratio as the image scales. If you need to support IE 11 or below, then you either need to use CSS to preserve the aspect ratio (see http://www.mademyday.de/css-height-equals-width-with-pure-css.html) or you could use JS to automate that for you (see https://gist.github.com/Heydon/369185d08d9ce2426f01863625e95525).
Here’s a working version of your CodePen demo:
https://codepen.io/tedw/pen/YEOLPr?editors=1100
FWIW, here are some good resources regarding scaling SVGs:
https://css-tricks.com/scale-svg/
https://codepen.io/jonitrythall/post/preserveaspectratio-in-svg
Hope that helps!
UPDATE:
I imported your SVG into Illustrator and did some optimization (including running it through https://jakearchibald.github.io/svgomg/). Here’s the final code:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522 213" preserveAspectRatio="xMidYMid meet" style="font-family: Helvetica, sans-serif; font-size: 6px;" fill="#000">
<g transform="translate(20 60)">
<path d="M490 128.2l-71.2 5-71-.3L63-57l-71 176.3"/>
<circle cx="489.9" cy="128.2" r="3"/>
<circle cx="418.8" cy="133.4" r="3"/>
<circle cx="347.7" cy="132.9" r="3"/>
<circle cx="63.2" cy="-57" r="3"/>
<circle cx="-7.9" cy="119.3" r="3"/>
</g>
<text transform="translate(498.37 210.08)">17/10/18</text>
<text transform="translate(427.266 210.08)">17/10/17</text>
<text transform="translate(356.16 210.08)">17/10/16</text>
<text transform="translate(71.735 210.08)">17/10/12</text>
<text transform="translate(.85 210.08)">17/10/11</text>
<text transform="translate(0 201.83)">0</text>
<text transform="translate(0 179.485)">100</text>
<text transform="translate(0 157.137)">200</text>
<text transform="translate(0 134.793)">300</text>
<text transform="translate(0 112.47)">400</text>
<text transform="translate(0 90.123)">500</text>
<text transform="translate(0 67.78)">600</text>
<text transform="translate(0 45.435)">700</text>
<text transform="translate(0 23.095)">800</text>
<g fill="none" stroke="#000">
<path d="M12 200.6h498"/>
<path d="M12 178.3h498"/>
<path d="M12 156h498"/>
<path d="M12 133.6h498"/>
<path d="M12 111.3h498"/>
<path d="M12 89h498"/>
<path d="M12 66.6h498"/>
<path d="M12 44.3h498"/>
<path d="M12 21.8h498"/>
</g>
</svg>