[svg-developers] Re: Stroking small text
I've been using a filter for my text halos and it's been great. As IE9 doesn't support filters, I need an alternative. Holger's method doesn't seem to work in IE9. Are there any other workarounds for this? --- In svg-developers@yahoogroups.com, Holger Will hol...@... wrote: hi here is another method, using tref: ?xml version=1.0? svg xmlns=http://www.w3.org/2000/svg; xmlns:xlink=http://www.w3.org/1999/xlink; width=500 height=500 defs text id=melMellomveien/text /defs rect x=46 y=51 width=241 height=188 style=fill:rgb(242,172,190);stroke:rgb(0,0,0);stroke-width:1/ text x=160px y=181px style=fill:rgb(0,0,0);font-family:Arial;font-size:11; tspan style=stroke:#ff;stroke-width:2tref xlink:href=#mel//tspan tspan x=160px tref xlink:href=#mel//tspan /text /svg have fun holger scalablev wrote: Thanks Kirby and Doug! This is something I can use. --- In svg-developers@yahoogroups.com, Doug Schepers d...@s... wrote: Nice work, Kirby. If they don't want the outline to be blurry, they can just do this: filter id='halo' filterUnits='objectBoundingBox' x='-15%' y='-15%' width='130%' height='130%' feColorMatrix in='SourceAlpha' result='white' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/ feMorphology in='white' radius='1,1' operator='dilate' result='outline'/ feComposite in='SourceGraphic' in2='outline'/ /filter In general, though, filters are not well support across viewers, and are rather expensive to do. If they has a large number of text nodes, it might cause a problem. Still, this may well be just what they need. Regards- Doug skatethere wrote: | | | --- In svg-developers@yahoogroups.com, scalablev o...@n... wrote: | | Hi! | | I want to display text with a small white line around it, | like this: | http://kart.nois.no/test/svgtext/text.gif. | | Stroking the text seems to obscure the text itself. I'm not getting | exactly what I want with a filter either: | http://kart.nois.no/test/svgtext/text.svg | | Any suggestions? | | Have you tried using filters, like this: | | ?xml version=1.0? | !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN | http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd; | svg width=100% height=100% viewBox=0 0 200 120 | xmlns=http://www.w3.org/2000/svg; version=1.1 defs | filter id=halo filterUnits=objectBoundingBox | feColorMatrix in=SourceAlpha result=white type=matrix |values=0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0/ | feMorphology result=offset in=white radius=2,1 | operator=dilate/ | feGaussianBlur in=offset stdDeviation=.7 result=blur/ | feComposite in=SourceGraphic in2=blur result=comp | operator=over/ | /filter | /defs | rect x=0 y=0 width=200 height=120 fill=red/ text | x=0 y=20 font-size=14 fill=black | filter=url(#halo)Mellomveien/text | /svg | | --kirby - To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * Your email settings: Individual Email | Traditional * To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) * To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com * To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
Re: [svg-developers] Re: Stroking small text
hi here is another method, using tref: ?xml version=1.0? svg xmlns=http://www.w3.org/2000/svg; xmlns:xlink=http://www.w3.org/1999/xlink; width=500 height=500 defs text id=melMellomveien/text /defs rect x=46 y=51 width=241 height=188 style=fill:rgb(242,172,190);stroke:rgb(0,0,0);stroke-width:1/ text x=160px y=181px style=fill:rgb(0,0,0);font-family:Arial;font-size:11; tspan style=stroke:#ff;stroke-width:2tref xlink:href=#mel//tspan tspan x=160px tref xlink:href=#mel//tspan /text /svg have fun holger scalablev wrote: Thanks Kirby and Doug! This is something I can use. --- In [EMAIL PROTECTED], Doug Schepers [EMAIL PROTECTED] wrote: Nice work, Kirby. If they don't want the outline to be blurry, they can just do this: filter id='halo' filterUnits='objectBoundingBox' x='-15%' y='-15%' width='130%' height='130%' feColorMatrix in='SourceAlpha' result='white' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/ feMorphology in='white' radius='1,1' operator='dilate' result='outline'/ feComposite in='SourceGraphic' in2='outline'/ /filter In general, though, filters are not well support across viewers, and are rather expensive to do. If they has a large number of text nodes, it might cause a problem. Still, this may well be just what they need. Regards- Doug skatethere wrote: | | | --- In [EMAIL PROTECTED], scalablev [EMAIL PROTECTED] wrote: | | Hi! | | I want to display text with a small white line around it, | like this: | http://kart.nois.no/test/svgtext/text.gif. | | Stroking the text seems to obscure the text itself. I'm not getting | exactly what I want with a filter either: | http://kart.nois.no/test/svgtext/text.svg | | Any suggestions? | | Have you tried using filters, like this: | | ?xml version=1.0? | !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN | http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd; | svg width=100% height=100% viewBox=0 0 200 120 | xmlns=http://www.w3.org/2000/svg; version=1.1 defs | filter id=halo filterUnits=objectBoundingBox | feColorMatrix in=SourceAlpha result=white type=matrix |values=0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0/ | feMorphology result=offset in=white radius=2,1 | operator=dilate/ | feGaussianBlur in=offset stdDeviation=.7 result=blur/ | feComposite in=SourceGraphic in2=blur result=comp | operator=over/ | /filter | /defs | rect x=0 y=0 width=200 height=120 fill=red/ text | x=0 y=20 font-size=14 fill=black | filter=url(#halo)Mellomveien/text | /svg | | --kirby Yahoo! Groups Sponsor ~-- $4.98 domain names from Yahoo!. Register anything. http://us.click.yahoo.com/Q7_YsB/neXJAA/yQLSAA/1U_rlB/TM ~- - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: Stroking small text
--- In [EMAIL PROTECTED], scalablev [EMAIL PROTECTED] wrote: Hi! I want to display text with a small white line around it, like this: http://kart.nois.no/test/svgtext/text.gif. Stroking the text seems to obscure the text itself. I'm not getting exactly what I want with a filter either: http://kart.nois.no/test/svgtext/text.svg Any suggestions? Have you tried using filters, like this: ?xml version=1.0? !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd; svg width=100% height=100% viewBox=0 0 200 120 xmlns=http://www.w3.org/2000/svg; version=1.1 defs filter id=halo filterUnits=objectBoundingBox feColorMatrix in=SourceAlpha result=white type=matrix values=0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0/ feMorphology result=offset in=white radius=2,1 operator=dilate/ feGaussianBlur in=offset stdDeviation=.7 result=blur/ feComposite in=SourceGraphic in2=blur result=comp operator=over/ /filter /defs rect x=0 y=0 width=200 height=120 fill=red/ text x=0 y=20 font-size=14 fill=black filter=url(#halo)Mellomveien/text /svg --kirby Yahoo! Groups Sponsor ~-- $9.95 domain names from Yahoo!. Register anything. http://us.click.yahoo.com/J8kdrA/y20IAA/yQLSAA/1U_rlB/TM ~- - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
RE: [svg-developers] Re: Stroking small text
Nice work, Kirby. If they don't want the outline to be blurry, they can just do this: filter id='halo' filterUnits='objectBoundingBox' x='-15%' y='-15%' width='130%' height='130%' feColorMatrix in='SourceAlpha' result='white' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/ feMorphology in='white' radius='1,1' operator='dilate' result='outline'/ feComposite in='SourceGraphic' in2='outline'/ /filter In general, though, filters are not well support across viewers, and are rather expensive to do. If they has a large number of text nodes, it might cause a problem. Still, this may well be just what they need. Regards- Doug skatethere wrote: | | | --- In [EMAIL PROTECTED], scalablev [EMAIL PROTECTED] wrote: | | Hi! | | I want to display text with a small white line around it, | like this: | http://kart.nois.no/test/svgtext/text.gif. | | Stroking the text seems to obscure the text itself. I'm not getting | exactly what I want with a filter either: | http://kart.nois.no/test/svgtext/text.svg | | Any suggestions? | | Have you tried using filters, like this: | | ?xml version=1.0? | !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN | http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd; | svg width=100% height=100% viewBox=0 0 200 120 | xmlns=http://www.w3.org/2000/svg; version=1.1 defs | filter id=halo filterUnits=objectBoundingBox | feColorMatrix in=SourceAlpha result=white type=matrix |values=0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0/ | feMorphology result=offset in=white radius=2,1 | operator=dilate/ | feGaussianBlur in=offset stdDeviation=.7 result=blur/ | feComposite in=SourceGraphic in2=blur result=comp | operator=over/ | /filter | /defs | rect x=0 y=0 width=200 height=120 fill=red/ text | x=0 y=20 font-size=14 fill=black | filter=url(#halo)Mellomveien/text | /svg | | --kirby Yahoo! Groups Sponsor ~-- Make a clean sweep of pop-up ads. Yahoo! Companion Toolbar. Now with Pop-Up Blocker. Get it for free! http://us.click.yahoo.com/L5YrjA/eSIIAA/yQLSAA/1U_rlB/TM ~- - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
[svg-developers] Re: Stroking small text
Thanks Kirby and Doug! This is something I can use. --- In [EMAIL PROTECTED], Doug Schepers [EMAIL PROTECTED] wrote: Nice work, Kirby. If they don't want the outline to be blurry, they can just do this: filter id='halo' filterUnits='objectBoundingBox' x='-15%' y='-15%' width='130%' height='130%' feColorMatrix in='SourceAlpha' result='white' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/ feMorphology in='white' radius='1,1' operator='dilate' result='outline'/ feComposite in='SourceGraphic' in2='outline'/ /filter In general, though, filters are not well support across viewers, and are rather expensive to do. If they has a large number of text nodes, it might cause a problem. Still, this may well be just what they need. Regards- Doug skatethere wrote: | | | --- In [EMAIL PROTECTED], scalablev [EMAIL PROTECTED] wrote: | | Hi! | | I want to display text with a small white line around it, | like this: | http://kart.nois.no/test/svgtext/text.gif. | | Stroking the text seems to obscure the text itself. I'm not getting | exactly what I want with a filter either: | http://kart.nois.no/test/svgtext/text.svg | | Any suggestions? | | Have you tried using filters, like this: | | ?xml version=1.0? | !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN | http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd; | svg width=100% height=100% viewBox=0 0 200 120 | xmlns=http://www.w3.org/2000/svg; version=1.1 defs | filter id=halo filterUnits=objectBoundingBox | feColorMatrix in=SourceAlpha result=white type=matrix |values=0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0/ | feMorphology result=offset in=white radius=2,1 | operator=dilate/ | feGaussianBlur in=offset stdDeviation=.7 result=blur/ | feComposite in=SourceGraphic in2=blur result=comp | operator=over/ | /filter | /defs | rect x=0 y=0 width=200 height=120 fill=red/ text | x=0 y=20 font-size=14 fill=black | filter=url(#halo)Mellomveien/text | /svg | | --kirby Yahoo! Groups Sponsor ~-- $9.95 domain names from Yahoo!. Register anything. http://us.click.yahoo.com/J8kdrA/y20IAA/yQLSAA/1U_rlB/TM ~- - To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click edit my membership Yahoo! Groups Links * To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ * To unsubscribe from this group, send an email to: [EMAIL PROTECTED] * Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
