用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？

來源

2017-09-13 Joshua Muheim

的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

來源

2017-09-13 10:17:15

這看起來很有希望。有沒有辦法將它移動到'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>

來源

2017-09-13 10:33:20

這看起來也很有希望。像其他答案一樣的問題：有沒有辦法將它移動到'label :: after'僞元素的CSS'background-image'中？所以我不需要爲每個星號出現完整的'

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

用SVG替換文本中的星號（*）？

回答

相關問題