如何在@react-pdf/renderer中为文本首尾添加文本帽图标？

我正在使用@react-pdf/renderer@3.1.2库制作自定义PDF，需要给文本的首尾添加类似"文本帽"的图标——具体是文本左上角有一个左上到右下的斜线图标，右下角有一个右上到左下的斜线图标。但目前遇到问题：如果在文本区域内渲染SVG图片，position、transform等多数样式无法生效，想请教可行的实现方式。

现有实现代码如下：

<View style={{ flexDirection: "row", marginLeft: "20px", alignItems: "flex-end" }}>
    <View style={{ top: -1.5, position: "absolute", left: -2.5 }}>
        <Svg
            xmlns="http://www.w3.org/2000/svg"
            width={6}
            height={6}
            viewBox="0 0 6 6"
            fill="#fff"
        >
            <Path d="M6 1H1v5" stroke="#9AC440" />
        </Svg>
    </View>
    {/* <Text style={styles.profession}>{personalInfo?.profession}</Text> */}
    <Text
        style={{
            color: "#393B40",
            fontSize: "10px",
            fontWeight: 600,
        }}
        hyphenationCallback={(e) => breakName(e)}
    >
        {"Sr Deputy General Manager, Software Quality Assurance Engineer"}
    </Text>
    <View
        // render={(e) => console.log(e)}
        style={{
            marginLeft:
                getTextWidth(
                    "Sr Deputy General Manager, Software Quality Assurance Engineer",
                    { fontSize: 10, fontWeight: 600 }
                ) || 0,
        }}
    >
        <Svg
            xmlns="http://www.w3.org/2000/svg"
            width={6}
            height={6}
            viewBox="0 0 6 6"
            fill="#fff"
        >
            <Path d="M0 5h5V0" stroke="#9AC440" />
        </Svg>
    </View>
</View>

我需要实现的是文本被图标包裹的效果，即文本左上角和右下角分别对应显示斜线装饰图标。

内容的提问来源于stack exchange，提问作者Md. Al Amin