Question 245667 in Html Question posted in
Some basic documentation can be found here.

how to added text next to parts of a svg image using html and css

I am trying to add text next to parts of an svg image image.

Here is my html

 <svg id = "svgelem" width = "300" height = "300" xmlns = "http://www.w3.org/2000/svg">
            <polygon points="100,10 40,180 190,60 10,60 160,180" fill="blue"/>
         </svg>

Here is what I want it to look like

image

How do I do this? I am new to working with svgs

Tags:

2

Answers


  1. 0

    Going with Robert Longson‘s suggestion, here you have it:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svgelem" width="300" height="300" version="1.1" sodipodi:docname="star.svg" inkscape:version="1.3 (0e150ed6c4, 2023-07-21)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1">
    <rect
       x="60.081191"
       y="12.990528"
       width="205.00677"
       height="86.062246"
       id="rect1" />
    <rect
       x="60.081191"
       y="12.990528"
       width="205.00677"
       height="86.062246"
       id="rect2" />
    <rect
       x="60.081191"
       y="12.990528"
       width="205.00677"
       height="86.062246"
       id="rect3" />
    <rect
       x="60.081191"
       y="12.990528"
       width="205.00677"
       height="86.062246"
       id="rect4" />
    <rect
       x="60.081191"
       y="12.990528"
       width="205.00677"
       height="86.062246"
       id="rect5" />
  </defs>
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:zoom="2.4633333"
     inkscape:cx="150"
     inkscape:cy="122.39513"
     inkscape:window-width="1920"
     inkscape:window-height="974"
     inkscape:window-x="-11"
     inkscape:window-y="-11"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <polygon
     points="190,60 10,60 160,180 100,10 40,180 "
     fill="#0000ff"
     id="polygon1"
     transform="translate(50,55)" />
  <g
     inkscape:groupmode="layer"
     id="layer1"
     inkscape:label="text1">
    <text
       xml:space="preserve"
       id="text1"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:Arial;-inkscape-font-specification:Arial;text-align:center;white-space:pre;shape-inside:url(#rect1);opacity:0.81;fill:#000000;stroke:#0a8b13;stroke-width:11.3386"
       transform="translate(-27.604872,36.129905)"><tspan
         x="150.35843"
         y="25.000263"
         id="tspan7"><tspan
           style="stroke:none"
           id="tspan6">Text</tspan></tspan></text>
    <text
       xml:space="preserve"
       id="text2"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:Arial;-inkscape-font-specification:Arial;text-align:center;white-space:pre;shape-inside:url(#rect2);opacity:0.81;fill:#000000;stroke:#0a8b13;stroke-width:11.3386"
       transform="translate(91.745602,92.55751)"><tspan
         x="150.35843"
         y="25.000263"
         id="tspan9"><tspan
           style="stroke:none"
           id="tspan8">Text</tspan></tspan></text>
    <text
       xml:space="preserve"
       id="text3"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:Arial;-inkscape-font-specification:Arial;text-align:center;white-space:pre;shape-inside:url(#rect3);opacity:0.81;fill:#000000;stroke:#0a8b13;stroke-width:11.3386"
       transform="translate(66.1705,211.90798)"><tspan
         x="150.35843"
         y="25.000263"
         id="tspan11"><tspan
           style="stroke:none"
           id="tspan10">Text</tspan></tspan></text>
    <text
       xml:space="preserve"
       id="text4"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:Arial;-inkscape-font-specification:Arial;text-align:center;white-space:pre;shape-inside:url(#rect4);opacity:0.81;fill:#000000;stroke:#0a8b13;stroke-width:11.3386"
       transform="translate(-97.023005,211.90798)"><tspan
         x="150.35843"
         y="25.000263"
         id="tspan13"><tspan
           style="stroke:none"
           id="tspan12">Text</tspan></tspan></text>
    <text
       xml:space="preserve"
       id="text5"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:13.3333px;font-family:Arial;-inkscape-font-specification:Arial;text-align:center;white-space:pre;shape-inside:url(#rect5);opacity:0.81;fill:#000000;stroke:#0a8b13;stroke-width:11.3386"
       transform="translate(-121.38024,94.58728)"><tspan
         x="150.35843"
         y="25.000263"
         id="tspan15"><tspan
           style="stroke:none"
           id="tspan14">Text</tspan></tspan></text>
  </g>
</svg>
    Login or Signup to reply.
  2. 0

    Within the <SVG></SVG> block, you can add text using the <TEXT> tag. For details, I look at W3C schools or the Mozilla docs.
    TEXT in Mozilla Developer Docs

    Basically, the TEXT tag lets you type the text and style it. I use it for adding callouts to screen shots in documentation. The X and Y values position the text on the SVG "canvas". I put a white box with a red border behind the text. Here is an example of the HTML:

    <rect width="150" height="35" fill="white" x="175" y="90" stroke="red"></rect>
<text x="185" y="115" 
            font-family="'calibri', sans-serif" 
            font-size="20"
            font-style="bold"
            background-color="white">
The callout text
</text>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search