Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – inline SVG text (js)

I want to show text within an SVG which is wholly defined in js. The SVG picture shows as expected, but the text does not.
I have tried the actual SVG definition in an online SVG viewer and it has the same result: picture is good, but no text showing.

I create the following string in js and then use it as the content in an AdvancedMarkerElementmarker in Google Maps.

SVGstring = '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-3 -49 52 52" > <style>svg { margin-top: 3px margin-bottom: 3px margin-right: 3px margin-left: 3px}</style> <path  stroke="black" stroke-width="3" d="m 0,0 l 0,-25 l 23,0 l 7,-20 l 7,20 l 3,0 l 0,25 z" fill="#9494ff"  /><text x="20" y="35" font = "20px sans-serif" fill="black" >999</text></svg>'

The google maps marker then has its content set by:

        pinSvg = document.createElement('pinSvg');
        pinSvg.innerHTML = SVGstring; 
        marker.content = pinSvg;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    the following does what I wanted:

    svg { margin-top: 3px margin-bottom: 3px margin-right: 3px margin-left: 3px} <text x="20" y="-6" font-size="large" font-family="Arial, Helvetica, sans-serif" font-weight="bold" fill="#000000" text-anchor="middle" ;>0

    example of the SVG AdvancedMarkerElement


  2. 0

    It is visible but your svg is so tiny there’s no room for the text! 🙂

    I played around with the dimensions and could finally see the text:

    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="200" viewBox="0 0 50 10" > 

<style>svg { margin-top: 3px margin-bottom: 3px margin-right: 3px margin-left: 3px}</style>

<path stroke="black" stroke-width="3" d="m 0,0 l 0,-25 l 23,0 l 7,-20 l 7,20 l 3,0 l 0,25 z" fill="#9494ff" />

<text x="20" y="35" font = "20px sans-serif" fill="black" >999</text>

</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search