SVG Error: Root Element Namespace does not Match that Requested - 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>

Related

How to rotate svg component around its axis

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>

How to change the style of individual components of an SVG path?

The following code assigns the colour green to all the three lines of the SVG path.
<svg height="210" width="400">
<path d="M 150 0
L 75 200
L 225 200
L 150 0"
fill ="none" stroke="green" stroke-width="3" />
</svg>
Can I know how I can assign separate styles to each line?

In this case the solution would be using 3 different lines:
<svg height="210" width="400">
<g stroke-linecap="round" stroke-width="3" >
<path d="M 150 0
L 75 200" stroke="green"/>
<path d="M75 200
L 225 200" stroke="gold"/>
<path d="M225 200
L 150 0" stroke="red"/>
</g>
</svg>

It is not possible to have multiple styles within a single SVG path.

why this svg does not fill the screen?

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>

SVG filter on a path with userSpaceOnUse and a large filter region, my path still gets clipped

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>

SVG marker points in the wrong direction when changing line orientation

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>

Resources