Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2005
    Location
    Utah
    Posts
    65
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Outline SVG text in HTML5

    I want to outline text in HTML5 but the outline centers on the edge of the text instead of displaying on the outside of the text.

    Code:
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="1250px">
    
    <text x="50" y="80" font-size="17" fill="red" font-family="courier">
    
    <tspan x="50" dy="60" fill="black" stroke="red" stroke-width="4px" font-size="3em" font-family="impact" kerning="2">Fill is black; stroke is red</tspan>
      
    </text>
    </svg>
    Is there anyway to make the outline not interfere with the text or can I put the same text (un-outlined) over top of the outlined text?

    Any help is appreciated.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,866
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    First of all: SVG is not HTML 5, it’s XML.

    Now, unfortunately there is no specific outline position setting in SVG so the only thing you can do is to position another layer of the same text with the same fill color as the general background on top of the outline text.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,371
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Local Hero View Post
    Is there anyway to make the outline not interfere with the text or can I put the same text (un-outlined) over top of the outlined text?
    This was supposed to be possible via SVG 1.2 Full. That spec is dated 2005 and is still a W3C Working Draft though, suggesting that it's no longer being developed. SVG 2.0 is active (the last draft was posted two days ago), but the vectorEffects element that would have facilitated this isn't in the current spec.

    Assuming I've understood the SVG 1.2 spec, the following code should have done the trick:

    Code:
    <svg xml:lang="en" xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0,0 800,1250" width="800" height="1250">
    	<title>Demo</title>
    	<style>
    		text { stroke: red; stroke-width: 4; font-size: 3rem; font-family: Impact, sans-serif; vector-effect: url(#outside.stroke); }
    	</style>
    	<defs>
    		<vectorEffect id="outside.stroke">
    			<veStroke/>
    			<veFill/>
    		</vectorEffect>
    	</defs>
    	<text x="50" y="80">Fill is black; stroke is red.</text>
    </svg>
    Without that, the first thing that comes to mind is duplicating the element:

    Code:
    <svg xml:lang="en" xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0,0 800,1250" width="800" height="1250">
    	<title>Demo</title>
    	<style>
    		text { font-size: 3rem; font-family: Impact, sans-serif; }
    		text:first-of-type { stroke: red; stroke-width: 4; }
    	</style>
    	<text x="50" y="80">Fill is black; stroke is red</text>
    	<text x="50" y="80">Fill is black; stroke is red</text>
    </svg>
    That strikes me as "hacky", but it works.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    May 2005
    Location
    Utah
    Posts
    65
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks, that works. I even made a second outline. I know that you can control stroke linecaps, But how do I make the stroke on text have round ends?

    Code:
    <svg xml:lang="en" xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0,0 800,1250" width="800" height="1250">
    	<title>Demo</title>
    	<style>
    		text { font-size: 3rem; font-family: Impact, sans-serif; }
    		text:first-of-type { stroke: blue; stroke-width: 20; stroke-linecap: round;} 
                                text:nth-of-type(3n-1) { stroke: red; stroke-width: 4;}
    	</style>
    	<text x="50" y="80" stroke-linecap="round" >Fill is black; stroke is red</text>
                  <text x="50" y="80">Fill is black; stroke is red</text>
                  <text x="50" y="80">Fill is black; stroke is red</text>
    </svg>
    This won't make the blue stroke have rounded edges instead of square. Are round edges possible with text?

  • #5
    New Coder
    Join Date
    May 2005
    Location
    Utah
    Posts
    65
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Nevermind - stroke linejoin is what I needed.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,371
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Local Hero View Post
    Nevermind - stroke linejoin is what I needed.
    If you're going to learn SVG, I'd recommend bookmarking the SVG 1.1 spec: http://www.w3.org/TR/SVG11/. Section 11 has the info on stroking and Appendix N has a complete CSS property list.

    I'd also bookmark the SVG 2.0 spec: https://svgwg.org/svg2-draft/. It describes new properties (see Appendix K) such as vector-effect: non-scaling-stroke, which is apparently supported by Firefox, at least; I haven't tested it, but read a Firefox bug report saying it was supported. (As I mentioned before, vector-effect was defined in SVG 1.2, but it looks like SVG 2.0 kept the property while dropping all of the property's features that lacked browser support.)
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •