SVG圖片的文字置中與垂直置中(React與HTML內嵌SVG)

就如同下圖所表示的兩個SVG上有水平的字和垂直的字，以下將針對React.js和HTML內嵌SVG的作法。

React.js作法

寫一個MiddleAlignedText元件如下程式碼

設定vertical屬性為true就會是垂直置中的文字

設定vertical屬性為false就會是水平置中的文字

const MiddleAlignedText = ({vertical, children, ...rest}) => (

<svg>

<text

{...rest}

writingMode={vertical ? "tb" : undefined}

alignmentBaseline={vertical ? undefined : "middle"}

textAnchor="middle"

>{children}</text>

</svg>

);

使用MiddleAlignedText元件的一個React.js的程式碼如下

HTML內嵌SVG作法

在既有的SVG圖中(以這篇的圖來說就是衣服圖示)，在svg底下加入text，設定如React.js屬性，只是要記得轉換名稱成下面這些屬性

• writing-mode
• alignment-baseline
• text-anchor

將置中文字加入SVG圖片中的一個範例如下