Почему SVG feColorMatrix + ‹use xlink:href=#/› приводит к обрезанию пути?

Почему фигура, указанная в разделе, выглядит иначе (обрезается!), когда я использую фильтр для элемента?

  • Белые звезды отображаются корректно ("остроконечные" углы)
  • Но коричневые (отфильтрованные) звезды странно обрезаны.

Фрагмент кода:

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
        <filter id="colorScheme">
            <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB"  values="0.5 0.0   0.0   0.0 0.0 0.0   0.3 0.0   0.0 0.0 0.0   0.0   0.0   0.0 0.0 0.0   0.0   0.0   1.0 0.0"/>
        </filter>
        <defs>
            <g id="shape_star">
                <path d="M 50.000001,16.850071 60.828477,38.790929 85.041657,42.309326 67.520845,59.387917 71.656934,83.503263 50,72.117556 28.343064,83.503262 32.479155,59.387917 14.958344,42.309324 39.171522,38.790929 Z"/>
            </g>
            <g id="img_star_active">
                <use xlink:href="#shape_star" style="stroke: #FFFFFF; stroke-width: 10; fill: #FFFFFF;"/>
            </g>
            <g id="img_star_inactive">
                <use xlink:href="#shape_star" style="stroke: #FFFFFF; stroke-width: 10; fill: none; "/>
            </g>
        </defs>
        <use xlink:href="#img_star_active" filter="url(#colorScheme)"/>
        <use xlink:href="#img_star_inactive" transform="translate(100,0)" filter="url(#colorScheme)"/>
        <use xlink:href="#img_star_active" transform="translate(0,100)" />
        <use xlink:href="#img_star_inactive" transform="translate(100,100)"/>
    </svg>

См. пример на странице https://jsfiddle.net/kx2zjnec/3/.


svg svg-filters
person ultimate    schedule 24.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

    <filter id="colorScheme" x="-0.2" y="-0.2" width="1.4" height="1.4">
        <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB"  values="0.5 0.0   0.0   0.0 0.0 0.0   0.3 0.0   0.0 0.0 0.0   0.0   0.0   0.0 0.0 0.0   0.0   0.0   1.0 0.0"/>
    </filter>
person ccprog    schedule 24.06.2017
comment
Спасибо! Это работает как шарм. (За исключением того, что запятая между шириной и высотой должна быть удалена.) - person ultimate; 24.06.2017
comment
ой, откуда это? - person ccprog; 24.06.2017
comment
Теперь идеально :) - person ultimate; 24.06.2017
comment
SVG не включает ширину обводки при расчете ограничивающих рамок - person Michael Mullany; 25.06.2017