Html 用SVG替换文本中的星号（*）？

在HTML表单中标记必填字段的一种常见方法是在表单的顶部或底部添加一个星号（*），并（可能）添加一段解释星号的段落：

<label for="name">Name *</label>
<input type="text" id="name">

<p>* Required field</p>

名称*
*必填字段

我需要用SVG图形替换文本星号：

• 我需要它作为内嵌SVG直接在HTML代码中（没有外部资源）
• 我需要它可重复使用

我的第一个方法是：

我是SVG新手，因此我有以下问题：

• 如何添加包含定义的
  容器？CSS

  display:none

  是否正确
• 如何“自然”缩放SVG，使其适合文本大小？我使用了

  width

  和

  height

  ，但这会缩小SVG容器的大小，不会缩放其内容

也许有一种更有效的方法将星号附加到文本上，例如在

：：before

和

：：after

伪元素上使用CSS作为

背景图像

如何“自然”缩放SVG，使其适合文本大小

您需要为SVG提供一个
viewBox
，以告知浏览器SVG的尺寸。否则，它就不知道需要扩展多少

您的SVG路径约为23x25。因此，您的视图框应该类似于
“0 0 23 25”

如何添加包含定义的容器？CSS显示：无是正确的方式吗

使用
width=“0”height=“0”
通常更好<代码>显示：无

在某些情况下会导致问题

---

我想你想要这样

.control{
利润率：6px0；
}
标签{
显示：内联块；
宽度：120px；
垂直对齐：顶部；
}
.st0{
填充：#ff0000；
}
阿斯特先生{
宽度：8px；
高度：8px；
}

全名
传记

SVG似乎有些过火，当您可以使用带有

content

“*”`的伪元素，并使用

font-size:1em对其进行缩放时，我知道这个解决方案，但
content
是由屏幕阅读器读取的，这是我不想要的。即使如此，您也需要在SVG中使用适当的
viewbox
，然后把你的使用包装成一个跨度，并适当地缩放。至少乍一看是这样。这看起来很有希望。有没有办法将其移动到
标签：：after
伪元素的CSS
背景图像中？所以我不需要为每次出现的星号都有一个完整的
标记？是的。您可以将其作为数据URI包含。这看起来也很有希望。与另一个答案相同的问题：有没有办法将其移动到
标签：：after
伪元素的CSS
背景图像中？所以我不需要为每次出现的星号都有一个完整的
标记？
svg width="1em" height="1em" viewBox="0 0 23 25"
    use xlink:href="#asterisk"