2015-05-24 39 views
3

我無法將顏色填充到我的svg文件中。我希望徽標在裏面和外面都是紅色的。我將我的「填充」和「筆觸」屬性修改爲我想要的顏色,但輸出只是一個帶有紅色邊框和白色填充的徽標。我錯過了什麼?無法將顏色填充到我的svg文件中

<?xml version="1.0" encoding="UTF-8"?> 
<svg width="26pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" viewBox="0 0 26 26" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs/> 
<g id="Background"> 
    <path style="fill:#e41414;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z M19.4187 0 L2.35625 0 C1.05625 0 0 1.21875 0 2.68125 L0 16.1687 C0 17.6313 1.05625 18.85 2.35625 18.85 L8.85625 18.85 L9.18125 25.025 L14.3 18.85 L19.5 18.85 C20.8 18.85 21.8562 17.6312 21.8562 16.1687 L21.8562 2.68125 C21.775 1.21875 20.7188 0 19.4187 0 L19.4187 0 Z" transform="translate(2.1125, 0.4875)"/> 
</g> 
</svg> 
+0

它看起來像SVG只是一個已經變成了形狀(或者如果要讓這個在Illustrator中作出創建輪廓)中風。所以根據你的字符串(d =「...」),添加填充將只填充筆劃的內部,而不是像你想要的形狀的內部。 – smilefreak24

+0

請顯示所需結果或行爲的模型(如輸出的虛擬jpg文件) –

回答

2

在你的圖標,看起來像一條線,你可以填補,實際上是一個紅色的語音氣泡形狀與它較小的語音泡泡狀孔。這是字體字形和許多圖標集合的典型佈局。

您的圖標由一條帶有兩個子路徑的路徑組成。一個用於外形,另一個用於內部(孔)。每個子路徑以M路徑命令開始,並以Z路徑命令結束。

如果你想「填充」形狀的內部,你應該採取其中一個子路徑並複製它。把它放在原來的形狀後面。 「後面」意味着文件中的較早部分。

見下文。

<!-- The original icon --> 
 
<svg width="26pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" viewBox="0 0 26 26" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
<defs/> 
 
<g id="Background"> 
 
    <path style="fill:#e41414;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z M19.4187 0 L2.35625 0 C1.05625 0 0 1.21875 0 2.68125 L0 16.1687 C0 17.6313 1.05625 18.85 2.35625 18.85 L8.85625 18.85 L9.18125 25.025 L14.3 18.85 L19.5 18.85 C20.8 18.85 21.8562 17.6312 21.8562 16.1687 L21.8562 2.68125 C21.775 1.21875 20.7188 0 19.4187 0 L19.4187 0 Z" transform="translate(2.1125, 0.4875)"/> 
 
</g> 
 
</svg> 
 

 
<!-- Modified icon --> 
 
<svg width="26pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" viewBox="0 0 26 26" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
<defs/> 
 
<g id="Background"> 
 
    <!-- Duplicated sub path with yellow fill --> 
 
    <path style="fill:yellow;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z" transform="translate(2.1125, 0.4875)"/> 
 
    <path style="fill:#e41414;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z M19.4187 0 L2.35625 0 C1.05625 0 0 1.21875 0 2.68125 L0 16.1687 C0 17.6313 1.05625 18.85 2.35625 18.85 L8.85625 18.85 L9.18125 25.025 L14.3 18.85 L19.5 18.85 C20.8 18.85 21.8562 17.6312 21.8562 16.1687 L21.8562 2.68125 C21.775 1.21875 20.7188 0 19.4187 0 L19.4187 0 Z" transform="translate(2.1125, 0.4875)"/> 
 
</g> 
 
</svg>