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>
Related
How to draw a circle with stripped border in SVG. Something like attached image ?
<svg width="25%" height="25%" viewBox="0 0 120 120">
<circle class="default" cx="25" cy="25" r="24" fill="none" stroke="black" stroke-width="1"/>
<circle class="default" cx="25" cy="25" r="16" fill="none" stroke="black" stroke-width="1"/>
</svg>
It is necessary to divide the circle with the use stroke-dasharray of into 8 parts
The circumference at a radius of 20 is 2 * 3.14 * 20 = 125.6
Divide into 8 parts to get 4 sectors of the circle, each of which
will have a line and a space - 125.6 / 8 = 15.7
stroke-dasharray="15.7, 15.7", where the first value is the length of the dash the second value is a space
<svg width="30%" height="30%" viewBox="0 0 120 120">
<!-- Outer circle -->
<circle class="default" cx="25" cy="25" r="24" fill="none" stroke="black" stroke-width="1"/>
<!-- The circle is divided into 4 sections -->
<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black"
stroke-width="8" stroke-dasharray="15.7, 15.7 "/>
<!--Inner circle -->
<circle class="default" cx="25" cy="25" r="16" fill="none" stroke="black" stroke-width="1"/>
</svg>
Update
8 sectors
<svg width="30%" height="30%" viewBox="0 0 120 120">
<!-- Outer circle -->
<circle class="default" cx="25" cy="25" r="24" fill="none" stroke="black" stroke-width="1"/>
<!-- The circle is divided into 4 sections -->
<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black"
stroke-width="8" stroke-dasharray="7.85"/>
<!--Inner circle -->
<circle class="default" cx="25" cy="25" r="16" fill="none" stroke="black" stroke-width="1"/>
</svg>
As commented #enxaneta
the dash height would be the stroke-width. So you may set the
stroke-width = radius / 5
stroke-width="4"
How to make the gaps between dashes to be filled with white instead of
being transparent: you draw another circle with a white border and the
same stroke-width beneath the dashed one
Add a second circle
<circle class="gold" cx="25" cy="25" r="20" fill="none" stroke="gold"
stroke-width="4" stroke-dasharray="7.85" />
I added yellow sectors you can add any other color
<svg width="360" height="360" viewBox="0 0 120 120">
<circle class="gold" cx="25" cy="25" r="20" fill="none" stroke="gold"
stroke-width="4" stroke-dasharray="7.85" />
<circle class="black" cx="25" cy="25" r="20" fill="none" stroke="black"
stroke-width="4" stroke-dasharray="7.85" stroke-dashoffset="7.85"/>
</svg>
<svg width="360" height="360" viewBox="0 0 120 120">
<circle class="gold" cx="25" cy="25" r="20" fill="none" stroke="gold"
stroke-width="4" troke-dasharray="7.85" />
<circle class="black" cx="25" cy="25" r="20" fill="none" stroke="black"
stroke-width="4" stroke-dasharray="7.85" stroke-dashoffset="7.85"/>
</svg>
I got an icon from our designer to add to our custom icon font. The icon should be a circle with a cutout of a user. Unfortunately the designer didn't follow some fontcustom guidelines, like no opacity and only use 1 color. The user cutout was white on a black circle. Now I'm trying to cut the user out of the circle using a mask. This is what I tried:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="hole">
<circle cx="12" cy="9" r="3" stroke="black"/>
<path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="black"/>
</mask>
<circle cx="12" cy="12" r="12" fill="black" mask="url(#hole)"/>
</svg>
Now somehow, the complete circle dissapears. I tried playing around with a fill instead of a stroke, which didn't work. I also tried changing the stroke to white, but that just gives me the part of the user icon that is within the circle (which is the complete user).
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="hole">
<circle cx="12" cy="9" r="3" stroke="white"/>
<path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="white"/>
</mask>
<circle cx="12" cy="12" r="12" fill="black" mask="url(#hole)"/>
</svg>
How can I get my user to be cut out of the circle? I don't get why the mask won't work.
In a mask, white means opaque (solid) and black means transparent (hole).
So if you want to make a mask with a shape cut out of it, the background of the mask has to be white, and the hole parts should be black.
Like this:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<circle cx="12" cy="9" r="3" stroke="black"/>
<path d="M17 17C17 14.2386 14.7614 12 12 12C9.23858 12 7 14.2386 7 17" stroke="black"/>
</mask>
<circle cx="12" cy="12" r="12" fill="black" mask="url(#hole)"/>
</svg>
In Chrome, this fiddle renders just fine, however in firefox, the curved text is a complete mess:
https://jsfiddle.net/a1khn0cs/1/
<path id="curveBelow" d="M 25,75 A 40 40 0 0 0 95,75" stroke="none" fill="none"></path>
<text class="badge-circle-text" x="42" y="40">
<textPath alignment-baseline="middle" text-anchor="middle" href="#curveBelow">Text Belog</textPath>
</text>
I cannot find a reason why this happens in Firefox.
Could someone give a hint, how I could resolve or find the problem?
dominant-baseline="middle" and text-anchor="middle" are attributes of the text. Also in order to center text on a path you need to use startOffset = "50%" for the textPath and text-anchor="middle" for the text. I hope it helps.
<svg viewBox="0 0 120 120" width=120 height=120 version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="81512f4465f92d314502bc64-alpha">
<feColorMatrix type="saturate" values="0" result="desat"></feColorMatrix>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1"></feFuncR>
<feFuncG type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1"></feFuncG>
<feFuncB type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1"></feFuncB>
</feComponentTransfer>
</filter>
<mask id="81512f4465f92d314502bc64-grungeMask" x="0" y="0" width="180" height="180" maskUnits="objectBoundingBox">
<image x="0" y="0" width="180" height="180" filter="url(#81512f4465f92d314502bc64-alpha)" href="/grunge-mask.png"></image>
</mask>
<clipPath id="81512f4465f92d314502bc64-cutMiddle">
<rect x="0" y="0" width="120" height="45"></rect>
<rect x="0" y="75" width="120" height="45"></rect>
</clipPath>
<path id="81512f4465f92d314502bc64-curveAbove" d="M 25,45 A 40 40 0 0 1 95,45" stroke="none" fill="none"></path>
<path id="81512f4465f92d314502bc64-curveBelow" d="M 25,75 A 40 40 0 0 0 95,75" stroke="none" fill="none"></path>
<mask id="81512f4465f92d314502bc64-mainText">
<rect width="100%" height="100%" fill="#fff" x="0" y="0"></rect>
<text x="50%" y="50%" fill="#000" dominant-baseline="middle" text-anchor="middle">Text Center</text>
</mask>
</defs>
<g mask="url(#grungeMask)">
<circle class="badge-circle-outer-big" cx="60" cy="60" r="50" stroke="black" stroke-width="3" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
<circle class="badge-circle-outer-small" cx="60" cy="60" r="47" stroke="black" stroke-width="1" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
<circle class="badge-circle-inner-small" cx="60" cy="60" r="26" stroke="black" stroke-width=".5" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
<circle class="badge-circle-inner-big" cx="60" cy="60" r="24" stroke="black" stroke-width="1.5" fill="none" clip-path="url(#81512f4465f92d314502bc64-cutMiddle)"></circle>
<text dominant-baseline="middle" text-anchor="middle" class="badge-circle-text">
<textPath startOffset="50%" href="#81512f4465f92d314502bc64-curveAbove">Text Above</textPath>
</text>
<text dominant-baseline="middle" text-anchor="middle" class="badge-circle-text">
<textPath startOffset="50%" href="#81512f4465f92d314502bc64-curveBelow">Text Belog</textPath>
</text>
<path d="M 0,45 L 120,45 L 110,60 L 120,75 L 0,75 L 10,60" fill="black" class="badge-main" mask="url(#81512f4465f92d314502bc64-mainText)"></path>
</g>
</svg>
Is it possible to easily define a short text which is repeated in an defined offset along a curve in an svg grafik? Did i have to use patterns for that purpose or is there a attribute for the textpath element (I couldn't find something at google)
If you want to have specific predefined offsets along the path, you will need to have multiple copies of the <textPath> element with different startOffset values.
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath" startOffset="0">Text</textPath>
</text>
<text font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath" startOffset="200">Text</textPath>
</text>
<text font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath" startOffset="400">Text</textPath>
</text>
<text font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath" startOffset="600">Text</textPath>
</text>
<text font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath" startOffset="800">Text</textPath>
</text>
</svg>
Or if instead you wanted to have specific gaps between the words, rather than placing them at specific offsets, you can use dx on <tspan> to set the word spacings.
<svg width="12cm" height="3.6cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-size="42.5" fill="blue" >
<textPath xlink:href="#MyPath">Text
<tspan dx="200">Text</tspan>
<tspan dx="200">Text</tspan>
<tspan dx="200">Text</tspan>
<tspan dx="200">Text</tspan>
</textPath>
</text>
</svg>
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>