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

问题描述：

在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>容器？ CSS display: none正确的方法是？
我该如何缩放“自然”的SVG以适应文本的大小？我玩过width和height，但这会裁剪SVG容器大小，并且不会缩放其内容。

也许有一种更加有效的方式来将星号附加到文本上，例如，在::before和::after伪元素上使用CSS作为background-image？

的SVG似乎矫枉过正，当你可以使用一个伪元素与'content'“*”'，它使用'字号缩放：1em' –

我知道这件事的解决方案，但是'内容'被屏幕阅读器读取，我不想要。 –

在这一点上，你需要在你的SVG中使用一个合适的'viewbox'，然后用一个span来包围它，并且适当地缩放它..至少在第一时间脸红。 –

答

如何缩放SVG“自然”以适应文本的大小？

你需要给你的SVG一个viewBox告诉浏览器SVG的尺寸。否则，它不知道需要调整它多少。

您的SVG路径大约为23x25。所以你的viewBox应该像"0 0 23 25"。

svg width="1em" height="1em" viewBox="0 0 23 25" 
    use xlink:href="#asterisk"

我应该如何在它的定义添加的容器？ CSS显示：没有正确的方法？

使用width="0" height="0"通常更好。 display:none在某些情况下可能会导致问题。

https://codepen.io/anon/pen/eGYxmE

这看起来很有希望。有没有办法将它移动到'label :: after'伪元素的CSS'background-image'中？所以我不需要为每个星号出现完整的'

是的。您可以将其包含为数据URI。 –

答

我想你想要这样。

.control { 
 
    margin: 6px 0; 
 
} 
 
label { 
 
    display: inline-block; 
 
    width: 120px; 
 
    vertical-align: top; 
 
} 
 
.st0{ 
 
fill:#ff0000; 
 
} 
 
.ast { 
 
    width: 8px; 
 
    height: 8px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"style="display:none;"> 
 
<defs> 
 
    <symbol id="asterisk" viewBox="0 0 128 128"> 
 
    <g> 
 
    <path class="st0" d="M110.1,16.4L75.8,56.8l0.3,1l50.6-10.2v32.2l-50.9-8.9l-0.3,1l34.7,39.1l-28.3,16.5L63.7,78.2L63,78.5 l-18.5,49L17.2,111l34.1-39.8v-0.6l-50,9.2V47.6l49.3,9.9l0.3-0.6L17.2,16.7L45.5,0.5l17.8,48.7H64L82.1,0.5L110.1,16.4z"/> 
 
    </g> 
 
    </symbol> 
 
</defs> 
 
</svg> 
 
<form> 
 
    <div class="control"> 
 
    <label for="name">Full name <svg class="ast"><use xlink:href="#asterisk"></use></svg>  
 
    </label> 
 
    <input id="name" type="text" /> 
 
    </div> 
 
    <div class="control"> 
 
    <label for="biography">Biography</label><textarea id="biography" type="text"></textarea> 
 
    </div> 
 
    <div class="control"> 
 
    <input type="submit" value="Register" /> 
 
    </div> 
 
    <p aria-hidden="true"> 
 
    <svg class="ast"><use xlink:href="#asterisk"></use></svg> Required field 
 
    </p> 
 
</form>

这看起来也很有希望。像其他答案一样的问题：有没有办法将它移动到'label :: after'伪元素的CSS'background-image'中？所以我不需要为每个星号出现完整的'

https://stackoverflow.com/questions/10768451/inline-svg-in-css –

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

相关推荐