Заполните фон пути svg. Заполнение не работает

Мне нужно создать речевой пузырь в SVG.

Невозможно заполнить фон пути svg. Мне нужно заполнить цвет фона по этому пути. Заливка окрашивает только границу, как обводку.

<svg>
  <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1,0,0,1,1,1)" id="g3">
    <path fill="red" d="M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0 M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z " id="path5"/>
    <text x="15" y="32" fill="black">My Level</text>
  </g>
</svg>

введите описание изображения здесь


svg html css stroke jquery-svg
person Atul Sharma    schedule 12.04.2016    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Это должно работать:

<path style="fill:red;fill-opacity:1;" ...>

Изменить из комментариев:

О, теперь я вижу, в чем проблема. Форма определяется пустым внутренним пространством. Замените атрибут d на это:

d="m 46.387286,-0.35714286 c 22.108,0 40.03,12.47499986 40.03,27.86199986 0,15.387 -17.922,27.862 -40.03,27.862 -6.931,0 -13.449,-1.227 -19.134,-3.384 -11.22,4.224 -26.53900028,12.202 -26.53900028,12.202 0,0 9.98900028,-5.655 14.10700028,-12.521 1.052,-1.755 1.668,-3.595 2.021,-5.362 -6.51,-4.955 -10.4850003,-11.553 -10.4850003,-18.797 0,-15.387 17.9220003,-27.86199986 40.0300003,-27.86199986"
person cdm    schedule 12.04.2016
comment
О, теперь я вижу, в чем проблема. Форма определяется пустым внутренним пространством. Replace d attribute with this: d=m 46.387286,-0.35714286 c 22.108,0 40.03,12.47499986 40.03,27.86199986 0,15.387 -17.922,27.862 -40.03,27.862 -6.931,0 -13.449,-1.227 -19.134,-3.384 -11.22 ,4.224 -26.53900028,12.202 -26.53900028,12.202 0,0 9.98900028,-5.655 14.10700028,-12.521 1.052,-1.755 1.668,-3.595 2.021,-5.362 -6.51,-4.955 -10.4850003,-11.553 -10.4850003,-18.797 0, -15,387 17,9220003,-27,86199986 40,0300003,-27,86199986 - person cdm; 12.04.2016
comment
Большое спасибо ! Работал как шарм. Бит, как тебе удается это найти? - person Atul Sharma; 12.04.2016
comment
Я скачал изображение и открыл его в Inkscape. Там это было очевидно. - person cdm; 12.04.2016
comment
@cdm Как изменить правильный атрибут d с помощью Inkscape? - person Eric des Courtis; 01.11.2018

arrow_upward
5
arrow_downward

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

В вашем случае самое простое решение - разделить пути:

<svg>
  <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1,0,0,1,1,1)" id="g3">
    <path fill="red" d="M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0" />
<path fill='yellow' d="M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z " id="path5"/>
    <text x="15" y="32" fill="black">My Level</text>
  </g>
</svg>

person maioman    schedule 12.04.2016
comment
d=m 43.762513,1.2930698 c 0,0 -22.1482,0 -33.22231,15.3006702 -11.07409982,15.30067 -11.07409982,35.70156 0,51.00224 9.71264,13.41956 33.22231,15.30067 33.22231,15.30067 l 5.29338,29.79819 11.31778,-29.79819 77.518717,0 c 0,0 22.14822,0 33.2223,-15.30067 11.07411,-15.30068 11.07411,-35.70157 0,-51.00224 C 160.04061,1.2930698 137.89239,1.2930698 137.89239,1.2930698 l -94.129877,0 z - person Atul Sharma; 13.04.2016

arrow_upward
1
arrow_downward

Обычно в этих случаях происходит то, что вы считаете строкой, на самом деле это просто тело самого svg. Если вы отредактируете точки, составляющие svg, вы, вероятно, обнаружите, что по периметру есть кольцо точек с концентрическим набором точек только внутри периметра. Если вы удалите внутренние, вы увидите твердую форму.

person reabow    schedule 12.04.2016