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

Мне нужно создать речевой пузырь в 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>

источник

2016-04-12 Atul Sharma

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

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

источник

2016-04-12 07:43:55 cdm

Не работает. Только окраска границы как раньше. –

О, теперь я вижу, где проблема. Форма определяется пустым внутренним пространством. Замените атрибут d следующим образом: d = "m 46.387286, -0.35714286 c 22.108,0 40,03,12,47499986 40,03,27,86199986 0,15,377 -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,322 -6,51, -4,955 -10,4850003, -11,553 -10,4850003, -18,797 0 , -15.387 17.9220003, -27.86199986 40.0300003, -27.86199986 " – cdm

Спасибо большое! Работал как шарм. Бит, как вам удается это найти? –

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

источник

2016-04-12 07:43:17 reabow

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

В вашем случае самым простым решением является разделение путей:

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

источник

2016-04-12 10:54:12 maioman

d = "m 43,762513,1,2930698 c 0,0 -22,1482,0 -33,22231,15.3006702 -11.07409982,15.70067 -11.07409982,35.70156 0,51.00224 9.71264,13.41956 33.22231,15.30067 33.22231,15.30067 л 5.29338,29.79819 11,31778, -29,79819 77,518717,0 c 0,0 22,1822,0 33,2223, -15,30067 11,0711, -15,30068 11,0711, -35,70157 0, -51,00224 C 160,04061,1,2930698 137,89239,1,2930698 137,89239,1,2930698 l -94,129877,0 z " –

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

ответ

Смежные вопросы