why this svg does not fill the screen?
i just open "and_gate.svg" (svg below) with last version of firefox/chrome. it doesn't fill height of the screen. (I wrote height because this svg's width:26 height:32.)
<svg viewBox="0 0 26 32" xmlns="http://www.w3.org/2000/svg">
<path d="M 0 19 A 13 13 0 0 1 26 19 v 19 h -26 v -19 Z" fill="#000" />
</svg>
however if a svg that width:26 height:32 fills entire height of the screen. (svg below)
<svg viewBox="0 0 26 32" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="26" height="32" fill="#000" />
</svg>
If you combine the two it is clear your path leaves white.. ehm green space
The A(rc) goes from y=19 to y=13 , not to y=0 (top)
<svg viewBox="0 0 26 32" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="26" height="32" fill="green" />
<path d="M 0 19 A 13 13 0 0 1 26 19 v 19 h -26 v -19 Z" fill="#000" />
</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>
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 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>
I'm trying to make an svg animation for a path. The start result and the end result are fine, but for some reasons there are no intermediate positions (the animation just jumps from start to end after the duration.
This is the code I'm using:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:10px;}</style></defs><title>percentage-green</title>
<path
id="p1"
class="cls-1"
d="
M 20 40 A 20 20 0 1 0 40 20
"
/>
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
from="M 20 40 A 20 20 0 1 0 40 20"
to="M 50 57.32050807568877 A 20 20 0 0 0 40 20"
dur="10s"
/>
</svg>
If I understand you correctly, despite the difficulties you want to do an arc animation.
Arc formula
<path d="M mx,my A rx,ry x-axis-rotation large-arc-flag, sweep-flag x,y" />
Large-arc-flag and sweep-flag are integer-constant, which take only two values of "0" or "1" and do not lend themselves to smooth animation.
You can make a discrete transition animation from a large arc when Large-arc-flag = 1 to a small arcLarge-arc-flag = 0
On the example below the location of the small arc is indicated by a red dashed line.
The coordinates of the beginning and end of the small and large arcs coincide, only the value of the flag `Large-arc-flag from" 1 "to" 0 "
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}
</style>
</defs>
<title>percentage-green</title>
<g transform="scale(2)">
<path id="p1"
class="cls-1"
d="M 20 40 A 20 20 0 1 0 40 20">
<animate
attributeName="d"
attributeType="XML"
repeatCount="5"
begin="Layer_1.mouseover"
from="M 20 40 A 20 20 0 1 0 40 20"
to="M 20 40 A 20 20 0 0 0 40 20"
dur="2s" >
</animate>
</path>
<circle cx="40" cy="20" r="3" stroke="dodgerblue" fill="none" />
<path d="M 20 40 A 20 20 0 0 0 40 20" stroke-dasharray="3" stroke="red" fill="none" />
</g>
</svg>
Animation begins when you hover the cursor
The second example
Is similar to yours - the parameter "d" of the patch will change smoothly, with the constant value of large-arc-flag = 1 (large arc)
Animation begins when you hover the cursor
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<style>.cls-1{fill:none;stroke:#96cb61;stroke-linecap:round;stroke-linejoin:bevel;stroke-width:4px;}
</style>
</defs>
<title>percentage-green</title>
<g transform="scale(2)">
<path id="p1"
class="cls-1"
d="M 20 40 A 20 20 0 1 0 40 20">
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
repeatCount="5"
values="M 20 40 A 20 20 0 1 0 40 20;M 50 57 A 20 20 0 1 0 40 20;M 20 40 A 20 20 0 1 0 40 20"
begin="Layer_1.mouseover"
dur="3s"
restart="whenNotActive" >
</animate>
</path>
<circle cx="40" cy="20" r="4" stroke="dodgerblue" fill="none" />
<path d="M 50 57 A 20 20 0 1 0 40 20" stroke-dasharray="3" stroke="red" fill="none" />
</g>
</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>