Related
I just starting working with svgs and Snap.svg library. Following a tutorial I created an arc progress indicator. What I want now is to add an inner shadow to the animated arc. I read the documentation but the filter.shadow command only gives the option for an outer shadow. I did some research on adding filters to regular svgs and I added one to the svg that I'm binding to my Snap object. It does give me the inner shadow, however it ruins the arc animation; only about half of the arc appears even though the inner shadow is present. I changed some of the filter settings trying to fix it but nothing works. I'm thinking that filter only works for static svgs.
Any help would be appreciated. Thanx
UPDATE
Here is the code that I'm using.
<svg class="gauge" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 400 200" xml:space="preserve">
<path fill="none" stroke="#D1D2D1" stroke-miterlimit="10" d="M199.7,12.7V18h0.4v-5.3H199.7z M382,200c0-50-20.3-95.4-53.1-128.4
l8.4-8.4l-0.4-0.4l-8.4,8.4C295.6,38.4,250.1,18,200,18S104.5,38.3,71.5,71.2l-8.3-8.3l-0.4,0.4l8.3,8.3C38.3,104.5,18,149.9,18,200
h44c0-38,15.4-72.4,40.3-97.4l7.5,7.5l0.4-0.4l-7.5-7.5c24.9-24.8,59.2-40.2,97.1-40.3v10.5h0.5V62c38.1,0.1,72.6,15.6,97.5,40.7
c-0.1-0.1-0.2-0.2-0.3-0.4l-7.4,7.4l0.4,0.4l7.4-7.4c24.8,25,40.2,59.4,40.2,97.3H382z M102.3,102.6l0.3-0.3L102.3,102.6z"/>
</svg>
<script type="text/javascript">
var canvasSize = 400,
centre = canvasSize/2,
radius = canvasSize*0.8/2,
s = Snap('.gauge'),
path = "",
startY = centre-radius,
arc = s.path(path);
function fill(percent) {
var endpoint = percent*180;
Snap.animate(0, endpoint, function (val) {
arc.remove();
var d = val,
dr = d-180;
radians = Math.PI*(dr)/180,
endx = centre + radius*Math.cos(radians),
endy = centre + radius * Math.sin(radians),
largeArc = d>180 ? 1 : 0;
path = "M"+startY+","+centre+" A"+radius+","+radius+" 0 "+largeArc+",1 "+endx+","+endy;
arc = s.path(path);
arc.attr({
stroke: '#fff',
fill: 'none',
strokeWidth: 44,
});
}, 1500, mina.backout);
}
fill(50/100);
</script>
I added this code to the attribute to get an outer shadow.
arc.attr({
filter : s.filter(Snap.filter.shadow(1, 1, 2, 'black', 0.5))
})
I was wondering if there's something similar for an inner shadow.
I also tried adding this to the the embedded svg and then adding the attribute to the animated arc thinking it might work like a regular, static svg. It does give me an inner shadow, however only part of the animated arc gets displayed; it gets displayed within a rectangle.
<defs>
<filter id="inner-shadow">
<feGaussianBlur result="offset-blur" stdDeviation="5"></feGaussianBlur>
<feOffset dx="1" dy="1"></feOffset>
<feFlood flood-color="black" flood-opacity="1" result="color"></feFlood>
<feComposite operator="in" in2="offset-blur"></feComposite>
<feComponentTransfer>
<feFuncA slope="0.5"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
arc.attr({
stroke: '#fff',
fill: 'none',
strokeWidth: 44,
filter: 'url(#inner-shadow)',
});
You can adjust the filter area that its applied over so that it doesn't get cut off. The Snap code seemed to give an error for me, so I just tried it using the svg filter markup, as the problem seems to be SVG related, rather than Snap.
So the key bit to change would be..
<filter id="inner-shadow" y="-30" x="-30" height="400" width="500">
This gives an offset wider range. You can read more on that at filter docs
jsfiddle
SVG multiple shapes containing <g> I want get the particular g tage image width and height using svg editor(https://github.com/SVG-Edit/svgedit) .
Example Image:
<g id="svg_1" class="svg_16 deg_90 cat_top stag" transform="translate(168,27)">
<path id="path3482" stroke="null" d="M163.4569320678711,77.09903907775879 L163.53585815429688,57.430060029029846 L169.3652572631836,57.448439955711365 C172.57144165039062,57.45854997634888 176.23014068603516,57.605380058288574 177.49568939208984,57.77471995353699 C180.63410186767578,58.194659948349 239.44471740722656,73.29018974304199 239.9712677001953,73.8109302520752 C240.62197875976562,74.4544506072998 240.55477905273438,79.61404991149902 239.8870391845703,80.27433967590332 C239.3158416748047,80.83922958374023 181.77594757080078,95.68032836914062 178.26336669921875,96.16965103149414 C177.0821533203125,96.33391952514648 173.2498779296875,96.53572082519531 169.74712371826172,96.61808013916016 L163.3785629272461,96.76786041259766 L163.45748901367188,77.09888076782227 L163.4569091796875,77.09903907775879 L163.4569320678711,77.09903907775879 z" fill="#e8e8e8">
</g>
<g id="svg_2" class="svg_14 deg_180 cat_top stag" stroke-opacity="1">
<path id="path3408" stroke="null" fill="#d5d5d5" d="M333.94000244140625,178.6445770263672 C333.83778381347656,178.53108978271484 333.75416564941406,169.477783203125 333.75416564941406,158.52658081054688 L333.75416564941406,138.61399841308594 L373.75416564941406,138.61399841308594 L413.75416564941406,138.61399841308594 L413.75416564941406,158.73200225830078 L413.75416564941406,178.8499984741211 L373.94017028808594,178.8499984741211 C352.04217529296875,178.8499984741211 334.04217529296875,178.75717163085938 333.94017028808594,178.64366149902344 L333.940002441....50531768798828 L334.86944580078125,143.56642150878906 L373.89344787597656,143.56642150878906 L412.9174499511719,143.56642150878906 L412.9174499511719,141.70929718017578 L412.91815185546875,141.7094268798828 zM340.6531524658203,139.00318908691406 C339.46495056152344,138.9451675415039 337.520751953125,138.9451675415039 336.3325500488281,139.00318908691406 S336.11651611328125,139.10868072509766 338.4928436279297,139.10868072509766 S341.84124755859375,139.06121063232422 340.6531524658203,139.00318908691406 z">
</g>
<svg>
I want svg_1 width height.
var bbox = $("#svg_1").getBBox();
your bbox object looks like this:
SVGRect {x: 119, y: 138, width: 358, height: 308}
Is there any option in SVG to make stroke inside to the element ?
#html-cup {
stroke: #f00;
stroke-opacity: 0.5;
stroke-width: 4px;
fill: #666666;
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg viewBox="0 0 245 123" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M66.84,122.57 C50.67,122.59 34.5,122.57 18.34,122.59 C12.72,89.4 7.15,56.2 1.53,23.01 C28.9,23 56.26,22.98 83.63,23.02 C83.63,23.02 72.5,89.4 66.84,122.57 Z M23.1,52.01 C36.09,51.99 49.09,52 62.08,52 C60.94,65.26 59.68,78.51 58.54,91.78 C53.32,93.17 48.19,94.97 42.88,96.02 C37.33,95.22 32.05,93.15 26.62,91.77 C25.52,78.51 24.28,65.26 23.1,52.01 Z M30.14,60.03 C38.44,59.97 46.75,60.01 55.06,60 C54.92,61.66 54.77,63.33 54.62,65 L35.77,65 C35.93,66.58 36.07,68.15 36.22,69.73 C42.22,69.77 48.21,69.75 54.21,69.75 C53.78,74.94 53.27,80.12 52.74,85.3 C49.43,86.12 46.21,87.3 42.84,87.84 C39.26,87.46 35.86,86.1 32.39,85.19 C32.16,82.46 31.95,79.72 31.73,76.99 C33.43,77 35.14,77.01 36.84,77.03 C36.96,78.42 37.07,79.82 37.19,81.21 C40.68,82.52 44.37,82.52 47.91,81.39 C48.13,79.26 48.33,77.13 48.55,75 C42.87,75 37.19,75.01 31.51,74.99 C31.01,70 30.59,65.01 30.14,60.03 Z M52.511235,44.83526 C52.5123089,42.8596197 52.52,41 52.52,41 L54.75,41 L54.75,43.2271118 L54.75,45.965769 C55.3578145,45.972676 57.2375163,45.9831949 57.2375163,45.9831949 C57.2375163,45.9831949 57.9778145,45.985769 58.25,45.985769 C58.23,46.725769 58.2499999,48.1957688 58.2499999,48.1957688 C58.2499999,48.1957688 55.6972973,48.195769 53.7301025,48.195769 L52.52,48.195769 C52.5124025,47.2992642 52.5105772,46.0454936 52.511235,44.83526 Z M45.0349255,41 L47.01,43.6621647 L48.9949341,41 L51.0200005,41 C51.0200005,41 51.016932,47.4818916 51.0200005,48.2245641 C50.4613935,48.2062043 48.9949341,48.2245641 48.9949341,48.2245641 L48.9949341,44.6168721 C48.9949341,44.6168721 47.4588808,46.4909331 47.0100002,47.0509057 C46.5212191,46.4358539 45.0349255,44.6168721 45.0349255,44.6168721 C45.0349255,44.6168721 45.0548757,47.3157561 45.0349255,48.2245641 L43,48.2245641 C43.008857,46.080879 43,41 43,41 L45.0349255,41 Z M39.1482782,41.0148674 C39.6855205,41.0137978 40.3552118,41.0142539 41.220459,41.0178052 C41.2179565,41.8484326 41.2179565,43.28 41.2179565,43.28 C41.2179565,43.28 39.268809,43.2799999 39.1999998,43.2799999 C39.1899998,44.7199999 39.23,46.83 39.2,48.28 C38.65,48.29 39.1999998,48.2800002 37,48.2800002 L37,43.33 C36.7652074,43.3253041 36.4201598,43.3184032 36.0684053,43.3103326 C35.6710848,43.3012166 35,43.28 35,43.28 L35,41 C36.9693426,41.0480327 36.9919583,41.0191607 39.1482782,41.0148674 Z M28.75,40.99 C28.75,41.2714527 28.7480041,41.6786445 28.7457957,42.0983357 C28.7430609,42.6180758 28.74,43.1569852 28.74,43.5 L31.26,43.5 C31.26,43.2967853 31.2589257,43.0248153 31.2574813,42.7291611 C31.254519,42.1227861 31.25,41.4167853 31.25,41 L33.51,41 C33.5,43.4 33.51,45.84 33.51,48.24 C32.96,48.25 31.8499999,48.22 31.2999999,48.24 C31.2699999,47.61 31.3199999,46.3700002 31.2999999,45.7500002 L30.708252,45.7500002 L28.71,45.7500002 C28.69,46.3700002 28.73,47.62 28.71,48.24 C28.16,48.23 27.3096924,48.24 26.49,48.24 C26.49,45.84 26.5,43.4 26.49,41 C27.06,41 28.18,41 28.75,40.99 Z"
id="html-cup"></path>
<path d="M73.905,0.211380899 L76.155,10.7813809 L83.5892007,10.7013808 L85.865,18.5013809 L0.135,18.4613809 L2.73507334,10.7013808 L9.995,10.7013809 C9.995,10.7013809 11.605,3.6413809 12.425,0.121380899 L73.905,0.211380899 L73.905,0.211380899 Z" id="html-top"
fill="#666666"></path>
</g>
</svg>
Alert: Alignment with SVG elements is deprecated.
You can not align stoke. By default stroke is aligned from the middle.
Previously you could do this but this is deprecated
stroke-alignment="inner";
I'm trying to write a Django template tag that will generate a number inside a circle as an inline svg.
The math is pretty straight-forward (except for the fudge-factor in real_fontsize -- I'm thinking it has to do with numerals being shorter than the tallest character..?)
#register.inclusion_tag('numcircle.html')
def numcircle(n, size=36, border=4, color='white', background="black", **kw):
"""Draw a circle with a number inside.
"""
kw['padding'] = kw.get('padding', 2)
kw['num'] = n
kw['size'] = size
kw['border'] = border
kw['center'] = size / 2
kw['radius'] = (size / 2) - border
kw['color'] = color
kw['background'] = background
kw['fontsize'] = size - (2 * (border + kw['padding']))
real_fontsize = kw['fontsize'] * (0.8 if kw['fontsize'] > 25 else 1)
kw['ypos'] = kw['center'] + real_fontsize / 2 - kw['border'] + kw.get('yadjust', 0)
kw['xpos'] = kw.get('xpos', size / 2)
return kw
template:
<svg width="{{ size }}" height="{{ size }}" viewBox="0 0 {{ size }} {{ size }}">
<circle cx="{{ center }}"
cy="{{ center }}"
r="{{ radius }}"
stroke="{{ color }}"
stroke-width="{{ border }}"
fill="{{ background }}"/>
<text font-size="{{ fontsize }}"
fill="{{ color }}"
font-family="Verdana"
text-anchor="middle"
alignment-baseline="baseline"
x="{{ xpos }}"
y="{{ ypos }}">{{ num }}</text>
</svg>
it produces an svg that renders very nicely in all browsers I have tested, except the native iPad browser, where the number is flush with the bottom of the circle (and not in the center)..
<svg width="44" height="44" viewBox="0 0 44 44">
<circle cx="22"
cy="22"
r="20"
stroke="white"
stroke-width="2"
fill="#21435F"/>
<text font-size="36"
fill="white"
font-family="Verdana"
text-anchor="middle"
alignment-baseline="baseline"
x="22"
y="34.4">1</text>
</svg>
Is there any way to work around this issue in a cross-browser (IE9+) fashion?
jsfiddle: http://jsfiddle.net/onLyh6bm/
(using alignment-baseline: middle doesn't seem to align in the middle in any browser..: http://jsfiddle.net/68oamxdo/1/)
You can't really rely on the alignment-baseline property. Support for it is pretty spotty at best.
Even when it is supported, alignment-baseline: middle doesn't really vertically centre the characters. There is, in fact, no way to do it accurately and reliably.
You can centre horizontally with text-anchor="middle", which is supported everywhere.
IMO, the best you can do in the vertical case, is the solution I propose in this answer: https://stackoverflow.com/a/19273331/1292848
probably super easy question, but I have no idea how to use svgs. We have got the code:
<svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs/><g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1"><g fill="#000000" id="Group" transform="translate(-48.000000, -432.000000)"><path d="M54.8796844,443.0591 L54.8796844,445 L57.2307692,445 L57.2307692,443.0591 Z M56,448 C51.5817218,448 48,444.418278 48,440 C48,435.581722 51.5817218,432 56,432 C60.4182782,432 64,435.581722 64,440 C64,444.418278 60.4182782,448 56,448 Z M53.5700197,435.51041 C52.5864514,436.043208 52.0631167,436.947609 52,438.22364 L54.2800789,438.22364 C54.2800789,437.852024 54.4076253,437.493845 54.6627219,437.149093 C54.9178185,436.804341 55.3504243,436.631968 55.9605523,436.631968 C56.5811997,436.631968 57.0085458,436.771881 57.2426036,437.051713 C57.4766613,437.331544 57.5936884,437.641592 57.5936884,437.981867 C57.5936884,438.277369 57.4884955,438.548241 57.2781065,438.794493 L56.8205128,439.190732 L56.2445759,439.573539 C55.6765258,439.949633 55.3241295,440.282067 55.1873767,440.570853 C55.0506239,440.859639 54.9664696,441.382356 54.9349112,442.139019 L57.0650888,442.139019 C57.0703485,441.780835 57.1045362,441.516679 57.1676529,441.346541 C57.2675876,441.077903 57.4700839,440.842849 57.7751479,440.64137 L58.3353057,440.271995 C58.9033559,439.895901 59.28731,439.586972 59.4871795,439.345198 C59.8290615,438.946718 60,438.456461 60,437.874412 C60,436.925225 59.6068415,436.208867 58.8205128,435.725319 C58.0341841,435.241771 57.0466858,435 55.8579882,435 C54.9533157,435 54.1906671,435.170135 53.5700197,435.51041 Z M53.5700197,435.51041" id="Oval 318"/></g></g></svg>
which gives us a question mark. But how can I fill with color the actual question mark, not only the black circle ?
The <path> element provides you with a black circle containing a cut-out question mark. To fill the question mark, just put it on top of a circle with the required fill colour.
I've fixed your coordinates a bit in the following example:
<svg viewBox="0 0 16 16">
<circle r="7" fill="#ff0" transform="translate(8,8)" />
<path d="M6.88,11.059 L6.88,13 L9.231,13 L9.231,11.059 Z M8,16 C3.582,16 0,12.418
0,8 C0,3.582 3.582,0 8,0 C12.418,0 16,3.582 16,8 C16,12.418 12.418,16 8,16
Z M5.57,3.51 C4.586,4.043 4.063,4.948 4,6.224 L6.28,6.224 C6.28,5.852
6.408,5.494 6.663,5.149 C6.918,4.804 7.35,4.632 7.961,4.632 C8.581,4.632
9.009,4.772 9.243,5.052 C9.477,5.332 9.594,5.642 9.594,5.982 C9.594,6.277
9.488,6.548 9.278,6.794 L8.821,7.191 L8.245,7.574 C7.677,7.95 7.324,8.282
7.187,8.571 C7.051,8.86 6.966,9.382 6.935,10.139 L9.065,10.139 C9.07,9.781
9.105,9.517 9.168,9.347 C9.268,9.078 9.47,8.843 9.775,8.641 L10.335,8.272
C10.903,7.896 11.287,7.587 11.487,7.345 C11.829,6.947 12,6.456 12,5.874
C12,4.925 11.607,4.209 10.821,3.725 C10.034,3.242 9.047,3 7.858,3 C6.953,3
6.191,3.17 5.57,3.51 Z M5.57,3.513" fill="#000" fill-rule="evenodd" />
</svg>