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>
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'm using an SVG filter that I want to use on paths.
Since my path could be straight lines, I'm using userSpaceOnUse for the filter unit. To make sure that the path doesn't get clipped I make sure that my filter region is large enough.
<svg width="200px" height="200px" viewbox="0 0 200 200">
<defs>
<filter filterUnits="userSpaceOnUse" id="dark" x="0" y="0" width="200" height="200">
<feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 .2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0" />
</filter>
</defs>
<path transform="translate(100,100)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
<path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
</svg>
The filter is applied on the three paths: the two squares and the circle. However the circle gets clipped.
If I use objectBoundingBox the circle is rendered entirely. However this is not an option because I also want to use the filter on straight lines that have no dimensions.
If I play around with x and y of the filter, like -10 for both for instance, it works fine as well.
Is there something wrong with my filter region? My understanding is that it covers the SVG entirely so anything that uses the filter should not be cropped.
Or this is a use case not supported by userSpaceOnUse that I'm not aware ?
change the translate to (0,0) instead of (100,100) see how the shape is off the canvas.
<svg width="200px" height="200px" viewbox="0 0 200 200">
<defs>
<filter filterUnits="userSpaceOnUse" id="dark" x="0" y="0" width="200" height="200">
<feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 .2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0" />
</filter>
</defs>
<path transform="translate(0,0)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
<path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
</svg>
Translating it doesn't change that it's drawn above and left of the filter area originally. We could move the filter by changing its x and y values to fix that...
<svg width="200px" height="200px" viewbox="0 0 200 200">
<defs>
<filter filterUnits="userSpaceOnUse" id="dark" x="-10" y="-10" width="200" height="200">
<feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 .2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0" />
</filter>
</defs>
<path transform="translate(100,100)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
<path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
<path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
</svg>
I am currently running into the following error when trying to load an SVG file into my java application using Apache's Batik library:
java.io.IOException: Root element namespace does not match that requested:
Requested: http://www.w3.org/2000/svg
Found: null
I know that this question was asked here, but the OP's solution was to remove an invalid element.
Does anyone know anything else on this error? Below is my svg file that is causing the exception:
<div id="MapMarker">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="41 -24 118 178" width="118" height="178" version="1.2" baseProfile="tiny">
<path fill="rgb(255, 128, 128)" fill-opacity="1" stroke="black" stroke-width="4" d="M 45 150 L 45 70 L 100 20 L 155 70 L 155 150" />
<path fill="rgb(255, 255, 128)" stroke="black" stroke-width="4" d="M 90 135 l 0 -10 l 5 -5 l 0 -55 l 5 -5 l 5 5 l 0 55 l 5 5 l 0 10 l -10 -10 Z" />
<text font-family="Arial" font-size="30" font-weight="bold" fill="black" stroke="none" stroke-width="4" text-anchor="middle" x="68" y="110">S</text>
<text font-family="Arial" font-size="30" font-weight="bold" fill="black" stroke="none" stroke-width="4" text-anchor="middle" x="132" y="110">A</text>
<g fill="none" stroke="black" stroke-width="4" transform="translate(0)">
<path d="M 100 10 L 100 -15" />
<path d="M 120 10 L 120 -15" />
<path d="M 80 10 L 80 -15" />
</g>
</svg>
</div>
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>