как я могу сделать список-стиль-образ масштабе с размером шрифта списка, когда мы не можем использовать шрифты символ?

веб-страницы, я работаю над использует некоторые необычные шевроны для пунктов в списке. я бы хотел, чтобы определить список стиль, который весы с размер шрифта в списке предметов себя: это является конечной целью моей проблемы здесь.

в настоящее время мы продолжаем эти шевроны в svg-файлы (один из которых предлагается ниже), поэтому они могут быть увеличены, не глядя страшно. они ссылаются как этот:

ul.foo {    list-style-image: url("../images/chevron.svg");}
chevron-small.svgchevron-medium.svgchevron-large.svg

мы используем эти шеврон списки несколько раз друг вокруг сайт. иногда они с большими текстами, иногда с меньшим или обычного размера текста. мы вынуждены создать новый шеврон изображения для каждого размера шрифта (например , , и т. д.), но наверняка есть лучший способ, который позволяет нам использовать только одно изображение и она масштабируется вверх и вниз по своей основе размера шрифта!

однако, я не понял, как сделать масштаб изображения с размером шрифта еще.

the w3 wiki for list-style-imagebrian campbell's answerhow can i make an svg scale with its parent container?

говорит о том, что "если внутренняя ширина или высота определяется как процент, то этот процент будет решен против 1эм", которая звучит как это то, что мы хотим. я не работал, как сделать это случиться. по-видимому, предложить способ, чтобы сделать это процент что произошло, но когда я установить ширину и высоту 100%, пуля точек шеврон появляться очень маленький или его нет вообще, даже когда размер шрифта большой.

на <strong>как я могу сделать этот список-стиль-образ шкала полностью с текстом размер, так что в ул текста размер становится больше, пуля изображение не слишком?</сильный>

<сильный>шрифты символ:</сильный>

( мы не можем использовать их. они хотели получить работу визуально, но они имеют плохое влияние на доступность, так как программы чтения с экрана не зачитал пули как пули, но, как и некоторых других странных персонажей. мы можем определить шрифт пользовательский символ, возможно, и заменить символы пуля в нем с нашими, но размер файла накладные расходы при этом были бы чрезмерны. насколько я могу судить, мы должны использовать изображение.)

код моего свг это

в свг исходит из illustrator и имеет этот код:

<?xml version="1.0" encoding="utf-8"?><!-- generator: adobe illustrator 15.1.0, svg export plug-in . svg version: 6.00 build 0)  --><!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"><svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"     width="8px" height="14px" viewbox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve"><path fill="#666666" d="m0.37,12.638l5.726-5.565l0.531,1.347c0.252,1.059,0.261,0.601,0.547,0.321    c0.289-0.279,0.746-0.272,1.026,0.016l6.062,6.24c0,0.002,0.006,0.004,0.008,0.006c0.068,0.07,0.119,0.156,0.156,0.244    c7.902,7.088,7.846,7.399,7.631,7.61c-0.002,0.004-0.006,0.004-0.01,0.006l-6.238,6.063c-0.143,0.141-0.331,0.209-0.514,0.205    c-0.187-0.006-0.372-0.078-0.511-0.221c0.076,13.376,0.083,12.919,0.37,12.638"/></svg>

который показывает, как в следующем, где текст 16px и, и шеврон не масштабирование размера шрифта, но это порядочно крупные и заметные (немного больше, чем требуется в этом случае, но давайте игнорировать это, так как само изображение может быть отредактировано):

<п><имг срц="https://i.stack.imgur.com/hnf5g.png" алт=""></р>

brian campbell's answer

как я уже говорил, я пытался следовать, и набор свойств width или height в 100%:

<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"     width="100%" viewbox="0 0 8 14" enable-background="new 0 0 8 14" xml:space="preserve">

однако, высота или ширина определяется как 100%, кажется, шевроны крошечные, и гораздо меньше, чем 1эм, как сказано:

<п><имг срц="https://i.stack.imgur.com/cg02i.png" алт=""></р>

(скриншот из firefox. в chrome они немного больше, еще намного меньше, чем 16px и.)

фрагмент кода

/* 
the image referenced here is the svg provided above, with base 64 encoding. it is the
freshly exported version that still has a defined width and height of 8px and 14px.
you may wish to just save the svg above locally.
*/

ul {
  list-style-image: url('data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiiblbmnvzgluzz0idxrmltgipz48iurpq1rzueugc3znifbvqkxjqyails8vvzndly9eveqgu1zhideums8vru4iicjodhrwoi8vd3d3lnczlm9yzy9hcmfwagljcy9tvkcvms4xl0rurc9zdmcxms5kdgqipjxzdmcgdmvyc2lvbj0ims4xiibpzd0itgf5zxjfmsigeg1sbnm9imh0dha6ly93d3cudzmub3jnlziwmdavc3zniib4bwxuczp4bgluaz0iahr0cdovl3d3dy53my5vcmcvmtk5os94bgluayiged0imhb4iib5psiwchgiihdpzhropsi4chgiighlawdodd0imtrwecigdmlld0jved0imcawidggmtqiigvuywjszs1iywnrz3jvdw5kpsjuzxcgmcawidggmtqiihhtbdpzcgfjzt0ichjlc2vydmuipjxwyxroigzpbgw9iim2njy2njyiigq9ik0wljm3ldeyljyzogw1ljcyni01lju2nuwwljuzmswxljm0n0mwlji1miwxlja1oswwlji2mswwljywmswwlju0nywwljmymwmwlji4os0wlji3oswwljc0ni0wlji3miwxljayniwwljaxnmw2lja2miw2lji0yzasmc4wmdismc4wmdysmc4wmdqsmc4wmdgsmc4wmdzjmc4wnjgsmc4wnywwljexoswwlje1niwwlje1niwwlji0nem3ljkwmiw3lja4ocw3ljg0niw3ljm5osw3ljyzmsw3ljyxyy0wljawmiwwljawnc0wljawniwwljawnc0wljaxldaumda2bc02ljizocw2lja2m2mtmc4xndmsmc4xndetmc4zmzesmc4ymdktmc41mtqsmc4ymdvjltaumtg3ltaumda2ltaumzcyltaumdc4ltauntexltaumjixqzaumdc2ldezljm3niwwlja4mywxmi45mtksmc4znywxmi42mzgilz48l3n2zz4=');
  /* or if you wish to save the svg locally:
  list-style-image: url('chevron.svg');
  */
}

.small-list {
   font-size: 85%;
}

.large-list {
  font-size: 150%;
}
<ul class="small-list">
  <li>the goal is to make the chevron smaller for this list</li>
  <li>specifically, just slightly smaller than capital letters, as stated.</li>
  <li>nomas matas</li>
  <li>roris dedit</li>
</ul>

<ul class="large-list">
  <li>and larger for this list</li>
  <li>nomas matas</li>
  <li>roris dedit</li>
</ul>