0

I have a SVG image like the following:

enter image description here

It is a simple SVG with a number in it. The SVG file looks something like this:

<svg ...>
  <g ...>
    <text id="my_text" ...>
      <tspan ...>
        6
      </tspan>
    </text>
    ...
  </g>
</svg>

I can load it in purescript Halogen:

import Halogen.HTML
import Halogen.Svg.Elements
import Halogen.Svg.Attributes

loadImage :: forall w i. HTML w i
loadImage = image [x 0.0, y 0.0, width 36.0, height 36.0, href "assets/my_image.svg"]

How can I programmatically change the number "6" in it? Is there something like document.getElementById("my_text") ? Can it be done with CSS?

cdupont
  • 1,138
  • 10
  • 17
  • There is certainly something like `document.getElementById`, but I don't think the browser will let you mutate an SVG that was loaded from a URL. – Fyodor Soikin Jun 18 '23 at 02:47
  • The Native JavaScript [```` Web Component](https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd) I blogged about, can load an external SVG, inline it in the DOM and be accessed in the DOM – Danny '365CSI' Engelman Jun 18 '23 at 07:54
  • If you have the content of SVG as string, you can use the SVG parser defined in this repo https://github.com/getlistas/web/blob/master/src/Svg/Parser.purs to modify the inner element. – Saravanan Jul 24 '23 at 07:10

0 Answers0