I've got svg diagram with some yellow points(circles).
<html>
<title>Yellow circles</title>
<body>
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="622.4px" height="373px" viewBox="0 0 622.4 373" enable-background="new 0 0 622.4 373" xml:space="preserve">
<polygon points="0.1,0 622.4,0 622.4,373 0.1,373 "/>
<polygon fill="#3F3F3F" points="97,51.6 586.2,51.6 586.2,295.5 97,295.5 "/>
<g transform="translate(342,1098.55)" fill="yellow">
<g transform="scale(418.2,-405.9)">
<circle cx=".2888" cy="2.0004" r=".004"></circle>
<circle cx="-.2666" cy="2.0233" r=".004"></circle>
<circle cx="0" cy="2.2727" r=".004"></circle>
<circle cx="-.5845" cy="2.3201" r=".004"></circle>
<circle cx="0" cy="2.5786" r=".004"></circle>
<circle cx=".5845" cy="2.3201" r=".004"></circle>
</g>
</g>
</svg>
</body>
The problem is that I can't see yellow circles using Firefox from 3 / 10 of machines(in most cases circles are displayed in Firefox)
Noticed, that yellow points displayed always by using any version of Chrome
I faced the same problem and found the reported bug on Firefox. Before the update is released (version 42), working workaround for me is to use ellipse instead of circle, e. g.:
<ellipse cx=".2888" cy="2.0004" rx=".004" ry=".004"></ellipse>
Related
I'm currently working on nested pattern in svg where the first pattern is used to fill the second shape which is used to fill the third.
The following code snippet run perfectly on a website like w3schools, but once converted to a file and to use on a browser it only shows an empty box, with no error code.
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100">
<pattern id="a" viewBox="0 0 12 12" width="135%" height="150%">
<g stroke="black" stroke-width="1">
<circle cx="6" cy="6" r="4" fill="red"/>
<circle cx="6" cy="6" r="2" fill="yellow"/>
</g>
<animate attributeName="x" from="0" to="1.35" dur="5s" repeatCount="indefinite"/>
</pattern>
<pattern id="b" viewBox="0 0 50 50" width="100%" height="100%">
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)"/>
<Polygon points="0.05,0 0.05,50 50.05,50" fill="url(#a)" transform="scale(-1,1) rotate(90 50 50) translate(0,100)"/>
</pattern>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(90 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(180 50 50)"/>
<polygon points="0,0 0,50 50,50 50,0" fill="url(#b)" transform="rotate(270 50 50)"/>
<rect width="100" height="100" fill="transparent" stroke="black" stroke-width="3"/>
</svg>
Here is the following output:
I tried to use diverse way to use the pattern "a" like using <defs> or <use xlinks:href>, the code still run but it doesn't give the expected output or any errors. I tried using diverse browser (Chrome, Opera, Edge, Firefox), but they all give the same empty box. When I copy and paste the code while inspecting the element, to the w3school website, it all works fine.
Please help me to draw something like this using SVG.
<svg class="slide__overlay" viewbox="0 0 100 100" preserveAspectRatio="none"><path class="slide__overlay-path" d="M0,0 L100,0 C25,50 50,75 0,100z" /></svg>
I got this code from an old question. But i need to rotate this.
Thanks
so the easiest way to do this is to just rotate your shape:
transform="(-90, 50, 50)"
<svg viewbox="0 0 100 100" width="200" height="200">
<path transform="rotate(-90, 50, 50)" d="M0,0 L100,0 C25,50 50,75 0,100z"/>
</svg>
but let me explain to you how the path commands work... in the end, we will have a much nicer solution to your rotation problem...
so let's look at your path commands.
"M0,0 L100,0 C25,50 50,75 0,100z"
M0,0 means move to the coordinate 0,0 which is the top left corner of your image.
L100,0 is the line to command which draws a line from our current point (0,0) to point 100,0. 100 to the right and 0 down is the right to corner.
next up is the curve to command C25,50 50,75 0,100. the last two numbers are the coordinates your path will end at. 0,100 is your bottom left corner. and then you have the two control points. to understand these a bit better I have added a circle at each of these coordinates to your original drawing:
<svg viewbox="0 0 100 100" width="200" height="200">
<path d="M0,0 L100,0 C25,50 50,75 0,100z" opacity="0.5"/>
<g>
<line x1="100" y1="0" x2="25" y2="50" stroke="green" stroke-width="0.5"/>
<circle cx="25" cy="50" r="2" fill="green"/>
</g>
<g>
<line x1="0" y1="100" x2="50" y2="75" stroke="blue" stroke-width="0.5"/>
<circle cx="50" cy="75" r="2" fill="blue"/>
</g>
</svg>
as you can see, the control points determine the angle of the curve at the endpoints as well as the slope of the curve itself.
so to rotate your curve we start with the endpoints again:
what was your top left corner (0,0) will end up on the bottom left (0,100).
M0,100
then the line to command will end up in the top left corner L0,0
and the curve to command will end up in the bottom right corner (100,100)
Cx1,y1 x2,y2 100,100
but where to draw your control points?
your first control point (25,50) will end up 25 from the bottom and 50 from the left so at 50,75
your second control point will have to end up 25 from the right and 50 from the bottom. so at 75,50
so the curve to command looks like this: C50,75 75,50 100,100
to wrap it all up, here is your rotated path:
<svg viewbox="0 0 100 100" width="200" height="200">
<path d="M0,100 L0,0 C50,75 75,50 100,100z" opacity="0.5" fill="red" />
<g>
<line x1="0" y1="0" x2="50" y2="75" stroke="red" stroke-width="0.5"/>
<circle cx="50" cy="75" r="2" fill="red"/>
</g>
<g>
<line x1="100" y1="100" x2="75" y2="50" stroke="red" stroke-width="0.5"/>
<circle cx="75" cy="50" r="2" fill="red"/>
</g>
</svg>
In order to exactly repeat the shape of the curve as in the figure, you need to load the image into a vector editor.
And draw nodal points along the contour
Save file as SVG.
And copy only path to another file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100vw" height="100vh" viewBox="0 0 688 535" preserveAspectRatio="xMinYMin meet">
<path d="m4.8 11.6c0 0 34.3 55.4 56.1 79.3 25.6 28.2 55.7 52.3 86.6 74.5 36.1 26 75.7 46.7 114.6 68.1 26.5 14.5 54 27.3 81 40.9 27 13.6 54.2 26.8 81 40.9 23.2 12.2 46.6 23.9 68.9 37.7 27.6 17 54.9 35 80.1 55.3 25.6 20.6 50.3 42.7 72.1 67.3 13.2 14.9 35.3 48.1 35.3 48.1H4.8Z" style="fill:#5B7E95;stroke:none"/>
</svg>
You can use any of the online PNG to SVG convertor tools available. Also there are many opensource sites available for free hand drawing.
Examples
https://shapeshifter.design/
https://editor.method.ac/
For conversion of PNG to SVG you can use
https://image.online-convert.com/convert-to-svg
https://www.pngtosvg.com/
I've been trying to learn how to create graphics with SVG recently, and I am coming up against a problem when trying to display an image with the 'use' tag.
I've successfully played around with the 'use' tag to create duplicate objects in other svgs, so I'm not sure what's going on here.
My attempt to display this symbol with 'use' tag results in an invisible object with 0x0 as width x height
<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
<g id="yinyang">
<circle r="39"/>
<path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
<circle cy="19" r="5" fill="#fff"/>
<circle cy="-19" r="5"/>
<g/>
<use href="#yinyang" transform="scale(20)"/>
</svg>
How could i fix this?
Could be just a typo with your closing group tag <g/>
<svg xmlns="http://www.w3.org/2000/svg" width="466" height="466" viewBox="-40 -40 80 80">
<defs>
<g id="yinyang">
<circle r="39"/>
<path d="M0,38a38,38 0 0 1 0,-76a19,19 0 0 1 0,38a19,19 0 0 0 0,38" fill="#fff"/>
<circle cy="19" r="5" fill="#fff"/>
<circle cy="-19" r="5"/>
</g>
</defs>
<use href="#yinyang" transform="scale(0.9)"/>
</svg>
Also, the use block will repeat the shape that is already visible. If you just want to define it somewhere, and re-use it elsewhere, you can put inside of a <defs> block
The emoji in the SVG correctly displays in both Safari and Firefox. In Chrome and Opera it is not displayed at all. What do I need to do to have the emoji also display in Chrome and Opera?
<svg id="SVGbgcolor1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 144 144" alt="SVG Bitcoin Pictograph">
<g>
<text id="flag" x="0" y="136" font-family="courier" font-size="144">🇺🇸</text>
<g id="SVGbgcolor2" transform="matrix(2.403433 0 0 2.403433 133.9157 -.2672786)" fill="#ffff11" stroke="black">
<path d="m-29.67313 32.30631c-0.0078 3.964844-0.01563 7.929687-0.02344 11.89453 4.250716-0.05757 9.512582 0.672079 12.68164-2.011719 2.020462-1.485994 1.7925-8.830264-2.508482-9.337212-3.355145-0.489526-6.76593-0.500321-10.14972-0.5456z"></path>
<path d="m-29.66532 15.95475 0.09375 9.896485c3.94585-0.118673 9.206302 0.331177 11.81609-1.285296 2.052885-1.630257 1.024997-8.44682-3.021329-8.344769-2.954353-0.25838-5.925276-0.251126-8.888509-0.26642z"></path>
<path d="m-56.63264-1.090505-0.08727 63.0228 62.6767-0.05623-0.033283-62.95665zm22.46341 6.233736h7.091797v4.530687h4.558594l-0.147496-4.383191h7.132551l-0.05164 4.411386c5.97362 0.3102366 11.03635 8.194718 8.783373 13.20227-1.403588 2.992536-4.061669 5.443424-7.199219 6.509766 4.270871 0.752585 9.289582 2.353423 9.201172 8.21875 0.4854457 8.953997-3.897788 10.18234-10.63281 13.90966v4.358297h-7.089844v-4.379284h-4.554687v4.52678h-7.091797v-4.52678h-10.81445l-0.05977-5.75189c1.541302 0.125363 4.914709-0.106688 4.939639-2.629801-0.03614-7.277082 0.06346-18.24454-0.02479-25.51909-0.172768-2.90147-4.855077-2.632184-4.855077-2.632184v-5.314695h10.81445z"></path>
</g>
</g>
<circle id="rounded1" cx="72" cy="72" r="72" stroke="black" stroke-width="2" fill="transparent"></circle>
<rect x="0" y="0" width="144" height="144" stroke="#ffffff" fill="#ffffff" fill-opacity="0" stroke-opacity="0"></rect>
</svg>
Worked it out. Needed to change font-size to 71 or less (font-size="71"). It seems that in Chrome 55.0.2883.95 greater font-sizes result in nothing being rendered. Though the emoji is present in code as can be seen when using toDataURL.
I am working on a simple map drowning with svg path tag
But it dose not work on fire fox or IE
(the drawing itself does not appear)
hear is a sample of them
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineAB" d= "M450.59,294.28l3.64-0.29l5.97,8.44l-5.54,4.18l-4.01-1.03l-5.39,0.07l-0.87,3.16l-4.52,0.22l-1.24-1.69l1.6-5.14L450.59,294.28L450.59,294.28z" stroke="blue" stroke-width="3" fill="blue" onclick="alert('Hello')"/>
</svg>
You shouldn't be using commas for the d attribute, use spaces instead. Also stroke-width has to be a length (e.g. px).
This should work:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path id="lineAB" d= "M450.59 294.28l3.64-0.29l5.97 8.44l-5.54 4.18l-4.01-1.03l-5.39 0.07l-0.87 3.16l-4.52 0.22l-1.24-1.69l1.6-5.14L450.59 294.28L450.59 294.28z" stroke="blue" stroke-width="3px" fill="blue" onclick="alert('Hello')"/>
</svg>
See the spec for a longer and more accurate explanation :).
Not sure what has changed since 2012, but I see no difference between the original code and this answer, what makes both of them "work" for me though is adding viewBox (codepen):
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="400 200 200 200">
<path id="lineAB" d= "M450.59,294.28l3.64-0.29l5.97,8.44l-5.54,4.18l-4.01-1.03l-5.39,0.07l-0.87,3.16l-4.52,0.22l-1.24-1.69l1.6-5.14L450.59,294.28L450.59,294.28z" stroke-width="3" onclick="alert('Hello')"/>
</svg>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="400 200 200 200">
<path id="lineAB" d= "M450.59 294.28l3.64-0.29l5.97 8.44l-5.54 4.18l-4.01-1.03l-5.39 0.07l-0.87 3.16l-4.52 0.22l-1.24-1.69l1.6-5.14L450.59 294.28L450.59 294.28z" stroke-width="3px" onclick="alert('Hello')"/>
</svg>
Also, even though using a comma before a command and after the previous command's coordinate breaks it in Firefox, using comma between coordinates themselves works and is perfectly fine as per the spec:
coordinate-pair:
coordinate comma-wsp? coordinate
comma-wsp:
(wsp+ comma? wsp*) | (comma wsp*)
comma:
","
wsp:
(#x20 | #x9 | #xD | #xA)