2013-07-24 2 views
1

Я видел много людей, разместивших это сообщение, и все они очень довольны своими ответами.SVG Path Fill Color with CSS

Однако я не могу получить заполнить мой путь на самом деле работает,

http://jsfiddle.net/OwenMelbz/LvgmV/

скрипку находится выше, SVG генерируется из Illustrator

HTML

<img src="http://owenmelbourne.com/arrow.svg"> 

CSS

img {width: 100px} 
path { 
    fill: blue; 
} 

Но я всегда получаю enter image description here

SVG код выглядит

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.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="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-background="new 0 0 9.334 11.881" xml:space="preserve"> 
<path fill="#999999" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877 
    c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0 
    c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
</svg> 

Если кто-то может пролить некоторый свет на этот вопрос было бы весьма признателен.

Благодаря

+1

Вы не можете применять любой CSS извне в файл SVG, на который имеется ссылка. Переместите CSS внутри SVG или используйте встроенный SVG в свой HTML. – Sirko

+0

Тогда он будет работать после этого ответа: http://stackoverflow.com/a/9529444/1450420 –

ответ

0

Изменения атрибута заливки никогда не будет работать в этой ситуации, потому что само изображение уже имеет заливки. Он не будет «заменен» или «перерисован» с использованием новых атрибутов.

Я также не думаю, что это сработает, даже если вы извлекли команду цвета в файле SVG.