在HTML表单来标记所需的字段的一种常见方式是简单地追加形式说明星号的星号(*)给它,以及(或许)在顶部段落或底部:用SVG替换文本中的星号(*)?
<label for="name">Name *</label>
<input type="text" id="name">
<p>* Required field</p>
我需要用SVG图形来代替文本星号:
- 我需要它作为直接在HTML代码嵌入SVG(无外部资源)
- 我需要它可重复使用的
我的第一种方法是这样的:
https://codepen.io/accessibility-developer-guide/pen/zEYKVR
我是很新的SVG,所以我有以下问题:
- 在它的定义我应该如何添加
<svg>
容器? CSSdisplay: none
正确的方法是? - 我该如何缩放“自然”的SVG以适应文本的大小?我玩过
width
和height
,但这会裁剪SVG容器大小,并且不会缩放其内容。
也许有一种更加有效的方式来将星号附加到文本上,例如,在::before
和::after
伪元素上使用CSS作为background-image
?
的SVG似乎矫枉过正,当你可以使用一个伪元素与'content'“*”',它使用'字号缩放:1em' –
我知道这件事的解决方案,但是'内容'被屏幕阅读器读取,我不想要。 –
在这一点上,你需要在你的SVG中使用一个合适的'viewbox',然后用一个span来包围它,并且适当地缩放它..至少在第一时间脸红。 –