遍歷SVG與PHP

屬性使用PHP，我需要的id的CSV文件的讀取...遍歷SVG與PHP

0123,0456,0789

...然後加載SVG圖形的XML文件，並改變這些特定的顏色屬性ID的。

SVG文件中的每個多邊形都有如下的記錄。我需要在＃d0d0d0到＃FF0000的每個匹配記錄中更改填充：值。外部循環當然是id，inner將是SVG文件的每個記錄。

風格=「字體大小：12px的; 填充：＃d0d0d0;填充規則：非零;行程：＃000000;中風不透明度：1;筆劃寬度：0.1;卒中miterLimit分別：4;衝程-dasharray：無;卒中的linecap：對接;標記開始：無;卒中linejoin：斜面」 d = 「M 131.85275,310.64335大號131.85275,311.08435」 ID = 「0123」

對於我的業餘愛好者的編程技巧水平，所需循環的一般PHP結構以及如何訪問樣式的特定屬性將會非常有幫助！

謝謝！ Brian

來源

2013-01-13 Brian Hershey

hd1，我想出瞭如何使用javascript解析XML/ATOM格式的feed，但是這個SVG格式看起來如此不同，我需要一些指示讓我開始。就像我上面簡要說過的，我不確定「樣式」和「填充」是如何關聯的，以及用於訪問它們的php術語。 –

DOMDocument對象有getelementbyid，getAttribute和setAttribute，它應該讓你改變xml。

This example看起來類似於你想要的，一旦你得到了樣式，你可以explode與';'獲取樣式數組，然後使用新樣式join。

來源

2013-01-13 06:04:16 NoBugs

我會推薦一種不同的方法：使用CSS來改變顏色。沒有需要循環的SVG元素。爲了做到這一點，你應該清理一下SVG文件，這也會使它更加緊湊。

據我瞭解，所有將要色元素與內容

font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:butt;marker-start:none;stroke-linejoin:bevel

相同的樣式屬性中刪除這些屬性，有一個合理的class屬性替換它們。假設這些路徑是地圖上的國家，那麼可以給它們一個屬性class="country"。然後樣式的所有使用一個CSS規則，像那些：

.country { 
    fill: #d0d0d0; 
    fill-rule:nonzero; 
    stroke:#000000; 
    stroke-opacity:1; 
    stroke-width:0.1; 
    stroke-miterlimit:4; 
    stroke-dasharray:none; 
    stroke-linecap:butt; 
    marker-start:none; 
    stroke-linejoin:bevel; 
}

我離開走font-size財產，因爲這是無關緊要的<path>元素。（可能您可以進一步簡化這一點，因爲很多屬性重複默認值，並且除非您更改路徑的父元素中的那些屬性，否則它們是多餘的，但不會影響其它屬性。任何人）

還有一個問題：如果你的文件的ID看起來確實像0123，0456或0789，這些都是無效的，因爲他們需要遵循XML命名規則，不能以數字開頭。嘗試使用ID對這些元素進行樣式設置或試圖對其使用getElementById()時，您應該會遇到問題。因此，您可能想要將它們更改爲id0123,id0456和id0789

現在，您可以動態地從CSV數據中添加一些CSS。

0123,0456,0789

將成爲

#id0123,#id0456,#id0789 {fill:#FF0000}

就大功告成了。可以將CSS添加到SVG文件的<style>元素中，或者創建一個單獨的CSS文件並從SVG引用它。這樣，在動態更改顏色時，不必對SVG進行任何更改。如果您在HTML中內嵌使用SVG數據，則還可以將其添加到HTML頁面中的<style>元素或HTML引用的CSS文件中。

來源

2013-01-13 11:30:03

回答

相關問題