Question

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

<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＆＃34;自然＆＃34;所以它适合文本的大小？我使用了width和height，但这会调整SVG容器的大小，并且不会扩展其内容。

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

Answer 1

我想你想要这样。

.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>

Answer 2

如何扩展SVG＆＃34;自然＆＃34;所以它符合文本的大小？

你需要给你的SVG setDataSource告诉浏览器SVG的尺寸。否则它不知道需要多大才能扩展它。

您的SVG路径约为23x25。所以你的viewBox应该是viewBox。

"0 0 23 25"

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

使用svg width="1em" height="1em" viewBox="0 0 23 25" use xlink:href="#asterisk"通常会更好。 width="0" height="0"在某些情况下会导致问题。

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

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

2 个答案: