Заливка текста svg выходит за границы символа

250

11 сентября 2018, 23:10

Подскажите, пожалуйста, в чем проблема (или я что-то не понимаю). Есть SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg 
   xmlns:dc="http://purl.org/dc/elements/1.1/" 
   xmlns:cc="http://creativecommons.org/ns#" 
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
   xmlns:svg="http://www.w3.org/2000/svg" 
   xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" 
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
   height="100%" 
   style="background:#FFFFFF" 
   version="1.1" 
   viewBox="0 0 1024 1024" 
   width="100%" 
   id="svg59" 
   sodipodi:docname="Auto.svg" 
   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"> 
  <metadata 
     id="metadata63"> 
    <rdf:RDF> 
      <cc:Work 
         rdf:about=""> 
        <dc:format>image/svg+xml</dc:format> 
        <dc:type 
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
      </cc:Work> 
    </rdf:RDF> 
  </metadata> 
  <defs id="defs32"> 
    <style type="text/css" id="style9"> 
    .default_default { 
      fill: #808080; 
      stroke: #000000; 
      stroke-width: 0.5px; 
    } 
</style> 
    <filter height="1" id="filter.808080" width="1" x="0" y="0"> 
      <feFlood flood-color="#808080"/> 
      <feComposite 
         in="SourceGraphic"/> 
    </filter> 
    <filter height="1" id="filter.FF00FF" width="1" x="0" y="0"> 
      <feFlood flood-color="#FF00FF"/> 
      <feComposite in="SourceGraphic"/> 
    </filter> 
  </defs> 
  <g id="root" transform="translate(0,0)"> 
    <text id="c9_5_1_text_0" transform="translate(576,384)" fill="#000000" font-family="Times New Roman" font-size="22pt" filter="url(#filter.808080)"> 
      <tspan x="0" dy="0em" id="tspan52">Test</tspan> 
    </text> 
    <text id="c5_3_1_text_0" transform="translate(320,256)" fill="#000000" font-family="Times New Roman" font-size="36pt" filter="url(#filter.FF00FF)"> 
      <tspan x="0" dy="0em" id="tspan55">0</tspan> 
    </text> 
  </g> 
</svg>

Текст отображается так, если открыть в редакторе:

Добавляю svg на страничку:

<iframe frameborder="0" marginwidth="0" marginheight="0" src="Auto.svg" id="AutoId"></iframe>

При загрузке страницы, filter заливает текст не по границам,а больше (сверху и снизу заметно):

Answer 1

Причина в параметрах фильтра

Область видимости действия фильтра на объект называется - Filter effects region

Это прямоугольник, с габаритными размерами width="X%", height="Y%" заданными в определении фильтра filter id="filter.808080">

Также могут быть заданы координаты левого верхнего угла региона действия фильтра - x="X%" y="Y%"

Если эти все параметры не указаны, то они будут по умолчанию равны:

x="-10%", y="-10%" width="120%" height="120%"

Поэтому у вас подложка была шире символа svg

Укажите значения этих параметров, чтобы обеспечить необходимый внешний вид цветной подложки:

Я выбрал следующие значения, вы можете перенастроить их по своему вкусу:

<filter  id="filter.808080"  x="10%" y="10%"  height="75%" width="90%">

Ваш пример ниже.

Файл я прогнал через svg оптимизатор, чтобы убрать ненужную служебную информацию Inkscape

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 1024 1024" width="100%"  background="#FFFFFF"> 
        <defs> 
    <style type="text/css" id="style9"> 
       
    .default_default { 
      fill: #808080; 
      stroke: #000000; 
      stroke-width: 0.5px; 
    } 
 
    </style> 
      <filter  id="filter.FF00FF"  x="10%" y="12%"  height="70%" width="90%"> 
      <feFlood flood-color="#FF00FF"/> 
      <feComposite in="SourceGraphic"/> 
    </filter> 
	  
	 <filter  id="filter.808080"  x="10%" y="10%"  height="75%" width="90%"> 
      <feFlood flood-color="#808080"/> 
      <feComposite in="SourceGraphic"/> 
    </filter> 
   
  </defs> 
  <g id="root" transform="translate(0,0)"> 
    <text id="c9_5_1_text_0" transform="translate(576,384)" fill="#000000" font-family="Times New Roman" font-size="22pt" filter="url(#filter.808080)"> 
      <tspan x="0" dy="0em" id="tspan52"> 
        Test 
      </tspan> 
    </text> 
    <text id="c5_3_1_text_0" transform="translate(320,256)" fill="#000000" font-family="Times New Roman" font-size="36pt" filter="url(#filter.FF00FF)"> 
      <tspan x="0" dy="0em" id="tspan55"> 
        0 
      </tspan> 
    </text> 
  </g> 
</svg>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Атрибут value у input

Возможно ли использовать два значения в атрибуте value у тега input? Если да, то возможно ли их парсить отдельно друг от друга с помощью js?

271

HTML

Получение хэша для виджета записей вк через js и html

Дело в том, что чтобы вставить себе виджет на сайт нужно получить hash записи, а вот он получается только на этом сайте: https://vkcom/dev/Post И сделать...

252

HTML