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>
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 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.
I have lines with arrow head at the end. when the lines point up, right, and down, auto is working to orient the arrow head correctly. When the line goes from right to left, the arrow head ends by pointing right instead of left.
Can anyone see why that is? thanks
<marker id="markerArrow" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" /></marker></defs>
You correctly noticed that the direction of the marker depends on the direction of drawing the line.
Your marker is drawn with the tip to the right.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<!--<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs> -->
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</svg>
The marker can be attached to the beginning of the line - marker-start and to the end of the line -marker-end
The line is drawn from the left M10,100 to the rightL190.100
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs>
<path d="M10,50 L190,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerStart)" />
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;"/>
</svg>
Now draw a line in the opposite direction from right to left
<path d="M190,100 L10,100" />
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs>
<path d="M190,50 L10,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerStart)" />
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;"/>
</svg>
There are two ways to solve this problem:
Draw and define in the section two markers that are directed in different directions and use them depending on the direction of the line
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="0">
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</marker>
<marker id="markerEnd" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs>
<path d="M10,100 L190,100" stroke="black" marker-start="url(#markerStart)" marker-end="url(#markerEnd)" />
<!-- Marker Start -->
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</svg>
Rotate one of the markers 180 degrees orient ="180"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerStart" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
<marker id="markerEnd" viewBox="0 0 12 12" refX="0" refY="6"
markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="180">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: red;" />
</marker>
</defs>
<path d="M10,100 L190,100" stroke="black" marker-start="url(#markerEnd)" marker-end="url(#markerStart)" />
</svg>
Update
Marker-mid
Used only on kinks of the line. On a completely straight line it will not be visible
In the example below, marker-mid ="url(#markerRight) is red
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="300" viewBox="0 0 200 200" >
<defs>
<marker id="markerRight" viewBox="0 0 12 12" refX="6" refY="6"
markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<path d="M12 0 L 0 6 L 12 12 z" style="fill: red;" />
</marker>
<marker id="markerLeft" viewBox="0 0 12 12" refX="6" refY="6"
markerUnits="strokeWidth" markerWidth="10" markerHeight="10" orient="auto">
<path d="M 0 0 L 12 6 L 0 12 z" style="fill: blue;" />
</marker>
</defs>
<path fill="none" d="M10,100 50,50 100,150 180,50 190,150" stroke="black" marker-start="url(#markerLeft)" marker-mid="url(#markerRight)" marker-end="url(#markerLeft)" />
</svg>
Why are my circles not starting in the upper left corner? What am I missing here?
I'm not sure why 0 of the X axis is in the center of the drawing.
Am I going crazy? :)
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="20" viewBox="0 0 100 20">
<svg x="0" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
<svg x="20" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
<svg x="40" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
<svg x="60" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
<svg x="80" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
</svg>
You are using viewBox="0 0 100 20" This means that the width in user units is 100 and the height is 20. Meanwhile you are using width="150" height="20"
You may delete the height attribute. In this case the height will be calculated so that the rapport w/h stays the same.
If you need width="150" height="20" you may try using a different viewBox="0 0 150 20".
Read more about the viewBox attribute
svg{background:#d9d9d9}
<svg xmlns="http://www.w3.org/2000/svg" width="150" viewBox="0 0 100 20">
<svg x="0" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
<svg x="20" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
<svg x="40" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
<svg x="60" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
<svg x="80" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" />
</svg>
</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>