如何在PureScript Halogen中修改SVG内的数字文本？

问题背景 #

你有一个包含数字的SVG结构如下：

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

目前通过PureScript Halogen的image标签加载该SVG：

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"]

以下针对你的问题逐一解答：

一、编程方式修改数字内容 #

用image标签加载外部SVG时，浏览器会将其视为独立资源，无法直接访问内部DOM元素，因此需要换一种加载方式：

方案1：内联SVG到Halogen组件（推荐）

将SVG结构用Halogen的Svg API重构，通过组件状态控制数字内容，完全符合声明式开发理念：

import Halogen.HTML
import Halogen.Svg.Elements as Svg
import Halogen.Svg.Attributes as SvgAttr
import Halogen.Component (mkComponent, HalogenM)
import Halogen.Query (Query(..))

-- 组件状态：存储要显示的数字
type State = { count :: Int }

-- 查询类型：用于触发数字更新
data Query a = UpdateCount Int a

-- 渲染逻辑：根据状态生成SVG
render :: State -> HTML Query
render state =
  Svg.svg [ SvgAttr.width "36", SvgAttr.height "36" ]
    [ Svg.g []
        [ Svg.text [ SvgAttr.id "my_text" ]
            [ Svg.tspan [] [ text $ show state.count ] ]
        -- 保留SVG其他原有元素
        ]
    ]

-- 更新逻辑：响应查询修改状态
eval :: Query ~> HalogenM State Query Unit Unit
eval = case _ of
  UpdateCount newCount next -> do
    modify_ (_ { count = newCount })
    pure next

-- 组件定义
component = mkComponent { initialState: { count: 6 }, render, eval }

之后只需向组件发送UpdateCount查询，即可修改显示的数字。

方案2：动态获取并修改SVG文本

如果不想重构原有SVG，可以通过Fetch获取SVG文本，修改后再渲染（注意确保SVG来源可信，避免XSS风险）：

import Effect.Aff (Aff, launchAff_)
import Effect.Class (liftEffect)
import Halogen.HTML (unsafeHtml, div, id_)
import Web.DOM (document)
import Web.HTML (createElementFromString)
import Web.XHR.Fetch (fetch, Request(..), RequestMethod(GET), text)

loadAndModifySVG :: forall w i. HTML w i
loadAndModifySVG =
  let
    updateSVG :: Aff Unit
    updateSVG = do
      -- 获取SVG文本内容
      resp <- fetch (Request "assets/my_image.svg" GET [] Nothing Nothing)
      svgText <- text resp
      -- 替换数字6为目标值（示例改为9）
      let modifiedText = replace "6" "9" svgText
      -- 创建DOM元素并插入容器
      elem <- createElementFromString document modifiedText
      container <- Web.DOM.getElementById "svg-container"
      case container of
        Just cont -> Web.DOM.appendChild cont elem
        Nothing -> pure ()
  in
    div [ id_ "svg-container" ] []
  -- 组件初始化时执行修改逻辑
  launchAff_ updateSVG

二、Halogen中类似document.getElementById的方法 #

Halogen是声明式框架，不推荐直接操作DOM，但如果需要，可通过工具函数或Web API实现：

import Halogen.Util (getHTMLElementById)
import Effect.Class (liftEffect)
import Web.DOM (textContent)

-- 在HalogenM上下文获取指定ID的元素
getTextElement :: HalogenM st q e Unit (Maybe Web.DOM.HTMLElement)
getTextElement = liftEffect $ getHTMLElementById "my_text"

-- 修改文本内容
modifyText :: String -> HalogenM st q e Unit Unit
modifyText newText = do
  maybeElem <- getTextElement
  case maybeElem of
    Just elem -> liftEffect $ textContent elem (Just newText)
    Nothing -> pure ()

注意：该方法仅对内联渲染的SVG有效**，通过image标签加载的外部SVG无法访问内部DOM。

三、CSS能否实现修改？ #

CSS无法直接修改SVG文本节点的内容，只能通过视觉覆盖的方式实现临时替换：

#my_text {
  position: relative;
  visibility: hidden; /* 隐藏原数字 */
}

#my_text::after {
  content: "9"; /* 设置新数字 */
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  /* 匹配原数字的样式 */
  font-family: inherit;
  font-size: inherit;
  fill: inherit;
}

这种方式局限性很大：需要精确匹配原数字的位置和样式，且原数字仍存在于DOM中，仅适合临时视觉替换场景，并非真正修改内容。

内容的提问来源于stack exchange，提问作者cdupont