I would like to draw a polygon with rounded corners.
I have path as follows but the inner corner arc seems to be drawn on the opposite side. How to fix this to have rounded corners everywhere?
<path d="M25,185 h250 a20,20 0 0 1 20,20 v90 a20,20 0 0 1 -20,20 h-120 a20,20 0 0 1 -20,20 v90 a20,20 0 0 1 -20,20 h-90 a20,20 0 0 1 -20,-20 v-220 a20,20 0 0 1 20,-20 z" fill="transparent" stroke="black"/>
I found solution by changing arc settings from a20,20 0 0 1 -20,20 to a20,20 0 0 0 -20,20.
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>
I have a problem when trying to convert an svg into a font with svgicons2svgfont
I've tried formatting the svg so many times. All the other icons work perfectly. I have no clue what is going on.
Here is the SVG
<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity=".8" clip-path="url(#a)">
<path d="M9.112 6.885a2.084 2.084 0 1 1-4.167-.001 2.084 2.084 0 0 1 4.167.001Z" fill="#0B2343"/>
<path d="M10.998 6.9h2.571M.5 6.9h2.57M7.035 2.936V.366M7.035 13.434v-2.57M9.92 4.01l1.817-1.818M2.332 11.603l1.817-1.817M9.92 9.786l1.817 1.817M2.332 2.192 4.149 4.01" stroke="#0B2343" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="a"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath>
</defs>
</svg>
It will be amazing if you can help me to find what is causing this!
Thanks
Thanks to the suggestion of Robert, I could solve the issue:
Manually remove the clipPath element.
using svgviewer.dev to format the svg
This was the final result and now it renders properly.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="enable-background:new 0 0 14 14" xml:space="preserve">
<path class="st0" d="M9.078 6.985a2.084 2.084 0 1 1-4.167-.001 2.084 2.084 0 0 1 4.167.001zM13.534 7.5h-2.57a.5.5 0 1 1 0-1h2.57a.5.5 0 1 1 0 1zM3.036 7.5H.466a.5.5 0 1 1 0-1h2.57a.5.5 0 1 1 0 1zM7 3.536a.5.5 0 0 1-.5-.5V.466a.5.5 0 1 1 1 0v2.57a.5.5 0 0 1-.5.5zM7 14.034a.5.5 0 0 1-.5-.5v-2.57a.5.5 0 1 1 1 0v2.57a.5.5 0 0 1-.5.5zM9.886 4.61a.498.498 0 0 1-.354-.854l1.818-1.817a.5.5 0 1 1 .707.707l-1.818 1.817a.498.498 0 0 1-.353.146zM2.298 12.202a.498.498 0 0 1-.354-.853L3.761 9.53a.5.5 0 1 1 .707.708l-1.817 1.817a.498.498 0 0 1-.353.146zM11.703 12.202a.498.498 0 0 1-.353-.146l-1.818-1.817a.5.5 0 1 1 .707-.708l1.818 1.818a.5.5 0 0 1-.354.853zM4.115 4.61a.498.498 0 0 1-.354-.147L1.944 2.646a.5.5 0 1 1 .707-.707l1.817 1.817a.5.5 0 0 1-.353.853z"/>
</svg>
Thanks!
I'm trying to change the color of this svg img, using TailwindCSS classes:
<svg class="fill-current text-white-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2zm16 3.38V6H4v1.38l8 4 8-4zm0 2.24l-7.55 3.77a1 1 0 0 1-.9 0L4 9.62V18h16V9.62z"/></svg>
and I have the following:
<svg
class="fill-current text-white inline-block h-20 w-20"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2zm16 3.38V6H4v1.38l8 4 8-4zm0 2.24l-7.55 3.77a1 1 0 0 1-.9 0L4 9.62V18h16V9.62z"/>
</svg>
But it doesn't work. What am I doing wrong?
In Tailwind, there is no text-white-500 it's just text-white.
So far you are doing it right by using fill-current. Simply added fill-current text-red-600. This will change the svg color to #E53E3E. Check the color palette
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
I'm trying to make a hover effect on an image using SVF filters. My problem is that I don't know how to make the effect to last. I can give 1 second of duration but I can't keep the values of the feColorMatrix as I want.
<filter id="blurred" color-interpolation-filters="sRGB" x="0%" y="0%" height="10%" width="10%">
<feColorMatrix result="wispy" type="matrix" values="8 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0">
<animate
attributeType="XML"
id="blurredAnimation"
attributeName="values"
from="8 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0"
to="3 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0"
dur="1s"
values = "8 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0;3 0 0 0 -1 4 0 4 3 -1 4 0 0 0 -1 1 0 0 0 0;"
keyTimes = "0;1"
begin="indefinite" />
</feColorMatrix>
</filter>
I want the green effect to stay there as long as the hover is there.
Thank you
Here is the jsFiddle
If you add fill="freeze" the animation will stay like it is once it's finished. You may want to add something to reset the animation on mouseout too.
function toggleBlurOff(background) {
document.getElementById("svg").setCurrentTime(0);
};