I'm lost as to how I can put a circle element at the center of an svg without it moving around or getting bigger and smaller as I resize the page.
I've tried viewBox but it doesn't do what I expected.
An alternative to the viewBox variant:
<svg width="100" height="100">
<circle cx="50%" cy="50%" r="10"/>
</svg>
The circle would however get bigger if you zoom the whole page.
Another way is to use a zero-length path with rounded linecaps, like this:
<svg viewBox="0 0 100 100">
<path d="M50 50" stroke-linecap="round" stroke="black"
fill="none" vector-effects="non-scaling-stroke"
stroke-width="20"/>
</svg>
http://jsfiddle.net/dAEB9/
<svg viewBox="-1 -1 2 2"> <!-- viewBox defines the coordinate system.-->
<circle cx="0" cy="0" r="1" />
</svg>
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
http://jsfiddle.net/QrNnN/
Put your circle in group <g> and use transform="translate(x, y)".
<svg viewBox="0 0 400 400">
<g transform="translate(200, 200)">
<circle cx="0" cy="0" r="200" style="" fill="darkOrange"></circle>
</g>
</svg>
Result:
Simple example on JSFiddle:
https://jsfiddle.net/mattez/0p2pstrf/
Related
This is an SVG which has a complete outline (the black border) in Inkscape, but it is not the case in Chrome and Firefox:
<svg width="100%" height="300%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="7 4.5 7.5 10" preserveAspectRatio="none" overflow="visible" transform="" style="position: absolute;">
<defs>
<path id="main0" d="M9.517312453695235 5.581015952966315 L8.563199389605689 6.6027522826740395 L9.517312453695235 5.581015952966315"></path>
<mask id="mask/main0" maskUnits="userSpaceOnUse">
<use xlink:href="#main0" fill="#ffffff" stroke="#ffffff" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"></use>
<use xlink:href="#main0" fill="#000000" stroke="#000000" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use>
</mask>
</defs>
<use x="0" y="0" xlink:href="#main0" opacity="0.2" fill="#ff50c0" stroke="#ff50c0" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use>
<use x="0" y="0" xlink:href="#main0" opacity="0.7" fill="transparent" stroke="#000000" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask/main0)"></use>
</svg>
Here are the renderings:
Increasing the view box' width restores the full outline. Decreasing that width makes the outline disappear completely. Why is it the case? Can it be corrected, so that there is always a full outline? By corrected, I do not mean defining directly a rounded path, but leaving the method of drawing mostly as it is, i.e. a polygon with an outset. I need it like that for a smooth in-browser animation. Drawing an opaque black filled polygon and then filling it with another, smaller polygon wont't work as well, as I need a semi-transparent fill but opaque border. Thus the use of a mask.
The mask simply isn't big enough to cover the shape. You've not set any height/width for it so you'll get the defaults of 120%. That's not enough in this case for the width.
Increasing the viewBox width corrects things as the mask width is a percentage of that viewBox width so you're indirectly increasing the mask width.
<svg width="100%" height="300%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="7 4.5 7.5 10" preserveAspectRatio="none" overflow="visible" transform="" style="position: absolute;">
<defs>
<path id="main0" d="M9.517312453695235 5.581015952966315 L8.563199389605689 6.6027522826740395 L9.517312453695235 5.581015952966315"></path>
<mask id="mask/main0" maskUnits="userSpaceOnUse" width="150%">
<use xlink:href="#main0" fill="#ffffff" stroke="#ffffff" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"></use>
<use xlink:href="#main0" fill="#000000" stroke="#000000" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use>
</mask>
</defs>
<use x="0" y="0" xlink:href="#main0" opacity="0.2" fill="#ff50c0" stroke="#ff50c0" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use>
<use x="0" y="0" xlink:href="#main0" opacity="0.7" fill="transparent" stroke="#000000" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask/main0)"></use>
</svg>
This is my first attempt at creating .svg images. I created an isometric view of a plate, but I noticed that when the image scales up, the lines do not intersect cleanly - they overlap (see image).
What am I doing wrong here?
<svg viewBox="0 0 100 60" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="greyGrad" gradientUnits="userSpaceOnUse">
<stop stop-color="#ddd" offset="0%"/>
<stop stop-color="#999" offset="85%"/>
</linearGradient>
</defs>
<g>
<polygon stroke="#333" points="0,0 8,14 11,14 3,0" fill="url(#greyGrad)"/>
<polygon stroke="#333" points="8,14 11,14 11,58 8,58" fill="url(#greyGrad)"/>
<polygon stroke="#333" points="0,0 8,14 8,58 0,45" fill="url(#greyGrad)"/>
</g>
</svg>
The problem is that mitred corners tend to stick out a long way at acute angles. The easy fix is to add stroke-linejoin="round" to your path elements, which will round them all off with the same radius.
But if you want sharp corners, you'll get better results if you draw the paths and fills separately, with the angles in the paths as large as possible. Here's an example. If you hover over the strokes, you should be able to see what's going on:
path:hover { stroke:#888; }
<!-- Cube consisting of three filled quads -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="180" viewBox="0 0 40 36">
<g stroke="#000" stroke-width="4">
<path d="M2,9 26,9 26,33 2,33Z" fill="orange"/>
<path d="M26,9 38,3 38,27 26,33Z" fill="red"/>
<path d="M2,9 14,3 38,3 26,9Z" fill="yellow"/>
</g>
</svg>
<!-- Cube with separate strokes and fills -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="180" viewBox="0 0 40 36">
<!-- Fills (no stroke) -->
<g stroke="none">
<path d="M2,9 26,9 26,33 2,33Z" fill="orange"/>
<path d="M26,9 38,3 38,27 26,33Z" fill="red"/>
<path d="M2,9 14,3 38,3 26,9Z" fill="yellow"/>
</g>
<!-- Strokes (outline first, then interior lines -->
<g fill="none" stroke="#000" stroke-width="4">
<path d="M2,9 14,3 38,3 38,27 26,33 2,33Z"/>
<path d="M2,9 26,9 38,3M26,9 26,33"/>
</g>
</svg>
I am trying to create tick Inside filled circle.
I did following but, doesn't looks perfect.
<svg height=10 viewBox="0 0 10 10" width=10>
<g fill="none" stroke="#22AE73" stroke-width="1"></g>
<circle cx=5 cy=5 fill='#29AB87' r=5 />
<polyline stroke="#ffffff" stroke-width="2" points="2.5,5.8 4.7,7.9 9.2,2.4 " />
</svg>
Any help would be greatly appreciated.
Your points are reaching the 10 10 part of your viewbox, hence it doesn't fit. You could change your points to lower values.
Alternatively, here's an svg that might work for you that is path based
<svg width="10px" height="10px" viewBox="0 0 10 10" >
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="tick">
<circle id="Oval" fill="#349006" cx="5" cy="5" r="5"></circle>
<path d="M7.26241838,2.25 L8.35843389,3.34601551 L3.9390165,7.76543289 L3.937,7.763 L3.93041937,7.77093389 L1.65,5.49051452 L2.74601551,4.39449901 L3.932,5.58 L7.26241838,2.25 Z" id="Combined-Shape" fill="#FFFFFF"></path>
</g>
</g>
</svg>
I want to make an horizontal s-curved shape where the bottom part of the shape is filled with a color.
When i use a quadratic bézier curve i get the shape that i want, but when i apply a fill color, the inside of the shapes get filled. See below
<svg width="400" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M0,30 Q100,0 200,30 T400,30" stroke="blue" stroke-width="1" fill="blue"/>
</svg>
I then tried do work with individual paths, which got me closer, but i want to reverse-fill the second path, but i have no idea how. This is my shape
<svg width="400" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M0,30 Q100,0 200,30" stroke="blue" stroke-width="1" fill="blue"/>
<path d="M200,30 Q300,60 400,30" stroke="blue" stroke-width="1" fill="none" />
<rect x="0" y="30" width="200" height="30" fill="blue" />
</svg>
How can i apply a filling color to the bottom side of the right curve?
If I understood the task correctly, you need to add three straight lines to your path (30px down from the end of the curve, then 400px left, and then 30px up, or just complete the path). You can use v, h, and Z commands in the same d attribute of the same path element for it:
<svg width="400" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M0,30 Q100,0 200,30 T400,30 v30 h-400 Z" stroke="blue" stroke-width="1" fill="blue"/>
</svg>
I have the fiddle with this problem. If I set viewBox property on the symbol element, icon displayed correctly. But if I set viewBox with same value on svg element with use inside, around use element appears weird empty space, inside of SVG-container.
Viewport of first variant is the same with viewport of second variant - 35x35px size at 2.5x3.5px coords.
What's the reason of this behavior? Bug or my own mistake?
EDIT: Add picture with correct and incorrect areas.
#svg-icons {
display: none;
}
.icon {
display: inline-block;
border: 1px solid red;
}
.icon + .icon {
margin-left: 20px;
}
<svg version="1.1" id="svg-icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-1" viewBox="2.5 3.5 35 35">
<rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" />
<circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" />
</symbol>
<symbol id="icon-2">
<rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" />
<circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" />
</symbol>
</svg>
<svg class="icon icon-1" width="100" height="100">
<use xlink:href="#icon-1"></use>
</svg>
<svg class="icon icon-2" viewBox="2.5 3.5 35 35" width="100">
<use xlink:href="#icon-2"></use>
</svg>
This probrem will be solved by thinking about how the use element is treated on drawing.
According to SVG 1.1 2nd edition, use element refers symbol element is treated as svg element on drawing. So the result by that svg structure is same as this.
<svg class="icon icon-2" viewBox="2.5 3.5 35 35" width="100">
<g>
<svg width="100%" height="100%">
<rect x="2.5" y="3.5" stroke="#000000" stroke-miterlimit="10" width="35" height="35" />
<circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="20" cy="21" r="14" />
</svg>
</g>
</svg>
Inner svg element has range of 100% width and height positioned at (0,0), and outer svg element has viewBox offset to (2.5, 3.5).
Thus shapes are cutoff by displacement of 2 svg element's rendering ranges.