I have a SVG but I can't set its width to 100%. How can I fix it?
body {
background: black
}
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50" version="1.1" viewBox="0 0 317 13.2">
<g transform="translate(-0.5 -284)" style="
width: 1500px;
">
<path fill="#fff" width="100%" transform="matrix(.265 0 0 .265 0 284)" d="m0 0v50h1200v-50h-560a40 40 0 0 1-40 40 40 40 0 0 1-40-40h-560z" fill-rule="evenodd" style="paint-order:markers fill stroke"></path>
</g>
</svg>
I tried to write attribute width="100%" but it doesn't work.
Related
I want to rotate the pointer around its axis of the following SVG component.
How could I achieve that. I have tried it with following method but it doesn't rotate around it.
<g id="Group 1" transform = "translate(100, 100) rotate(45 0 0)">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd" d="M302.248 291.371L230.862 209.521L212.309 230.492L302.248 291.371Z" fill="#72A1E7"/>
</g>
It is easier to:
rotate something if it can be centered around 0,0.
calculate the angle of the needle if you know the angle at the starting point.
Therefor the you could draw the needle like this, with the middle of the short line at 0,0 (yes, it is off-canvas) and then pointing at 6 o'clock:
svg {
background-color: silver;
}
<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd"
d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>
Now the needle can be moved to the center (or where ever) of the image:
svg {
background-color: silver;
}
<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<g id="Group 1" transform="translate(100 100)">
<path id="Point" fill-rule="evenodd" clip-rule="evenodd"
d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</g>
</svg>
The rotation can be done in different ways, but here I rotate the needle/path <path> itself to the imagined zero point of the meter and then use the group element <g> to give the meter a "value". So, here the calculation is that the meter takes up 300 deg, the zero value is at 30 deg (from 6 o'clock) and the max value is then at 330 deg. Here the value is 1/3 = 100 deg.
svg {
background-color: silver;
}
<svg width="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle transform="rotate(120 100 100)" cx="100" cy="100" r="85"
stroke="blue" stroke-width="5" stroke-dasharray="300 360" pathLength="360"
fill="none" />
<g id="Group 1" transform="translate(100 100) rotate(100)">
<path id="Point" transform="rotate(30)" fill-rule="evenodd"
clip-rule="evenodd" d="M -10 0 L 10 0 L 0 75 Z" fill="#72A1E7"/>
</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.
Expected behavior:
I'm trying to write ABC in polygon with the help of but nothing is showing up. Is this the right way to do?
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
<g id="ABC" transform="translate(-8.000000, -2.000000)">
<g transform="translate(11.000000, 5.000000)">
<text x="10" y="100" style={{ fill: '#64FFDA' }}>
<textPath href="#Shape" fill="#64FFDA">
ABC
</textPath>
</text>
<polygon
id="Shape"
stroke="#64FFDA"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
fillOpacity="transparent"
points="39 0 0 22 0 67 39 90 78 68 78 23"></polygon>
</g>
</g>
</svg>
If you need to place letters inside the polygon, you need to place the <text> command below the <polygon> command
Pay attention to the syntax of SVG command writing. Instead of strokeWidth ="5" you need stroke-width ="5"
<svg xmlns="http://www.w3.org/2000/svg" role="img" width="20%" height="20%" viewBox="0 0 84 96">
<g id="ABC" transform="translate(-8.000000, -2.000000)">
<g transform="translate(11.000000, 5.000000)">
<polygon
id="Shape"
stroke="#64FFDA"
stroke-width="4"
fill="#151515"
points="39 0 0 22 0 67 39 90 78 68 78 23"></polygon>
</g>
<text x="50" y="55" font-size="22px" font-weight="500" font-family="sans-serif" fill="#64FFDA" text-anchor="middle" >ABC</text>
</g>
</svg>
I have a figure with 100% width. And I need her inverted version. I rely on your help please.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 0 C50 90 100 0 100 0 Z"/>
</svg>
jsfiddle example
Draw it in white on a black background then.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none">
<rect width="100" height="40" fill="black"/>
<path d="M0 0 C50 90 100 0 100 0 Z" fill="white"/>
</svg>
or alternatively you could just keep drawing round the edge...
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 0 C50 90 100 0 100 0 v40 h-100 v-40Z" fill="black"/>
</svg>
I have this svg:
<circle cx="50" cy="100" r="50" stroke-width="0" fill="orange"/>
<polygon points="0,100, 50,50 100,100" fill="white"/>
The background is transparent. The polygon overwrites the circle with white color, but I want this area to be transparent (instead of white). How can I do this?
You can use fill-rule: evenodd property with path:s to "cut holes" to your shapes:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path fill="orange"
fill-rule="evenodd"
d="M50 50 L100 100 L0 100
A50 50 0 0 1 100 100
A50 50 0 0 1 0 100 z"/>
</svg>