自定義svg元素或屬性的D3和SVG命名空間是否有效？

我創建了一些自定義svg屬性，但還想通過svg validator測試。自定義svg元素或屬性的D3和SVG命名空間是否有效？

只見D3 > Namespace page，以前How can I specify a custom XML/SVG namespace with D3.js?，因此處理如下：

// d3.ns.prefix.geo = "http://www.example.com/boundingbox/"; 
// d3.ns.prefix.inkscape = "http://www.inkscape.org/namespaces/inkscape"; 
// SVG injection: 
var width = 600; 
var svg = d3.select("#hook").append("svg") 
     .attr("name", "Country's_name_administrative_map_\(2015\)") 
     .attr("id", "Country_s_name") 
     .attr("width", width) 
     .attr(':xmlns:geo','http://www.example.com/boundingbox/') 
     .attr(':xmlns:inkscape','http://www.inkscape.org/namespaces/inkscape') 
     .attr(":xmlns:cc","http://creativecommons.org/ns#"); 
// Tags: 
svg.append(":geo:g") 
     .attr(':xmlns:geo','http://www.example.com/boundingbox/') 
    .attr(":geo:id","geo") 
    .attr(':geo:syntax', "WSEN bounding box in decimal degrees") 
    .attr(':geo:west', WEST) 
    .attr('geo:south', SOUTH) 
    .attr(':geo:east', EAST) 
    .attr(':geo:north', NORTH) 
    .attr(':geo:title', title);

農產品：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    name="Country's_name_administrative_map_(2015)" 
    id="Country_s_name" 
    xmlns:geo="http://www.example.com/boundingbox/" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    xmlns:cc="http://creativecommons.org/ns#" 
    width="600" 
    height="579.2009758421691" 
    version="1.1"> 
    <defs xmlns="http://www.w3.org/1999/xhtml"> 
    <style type="text/css"><![CDATA[ 
     svg { border: 1px solid rgb(100, 100, 100); }]]> 
    </style> 
    </defs> 
    <geo:g xmlns:geo="http://www.example.com/boundingbox/" 
    geo:id="geo" 
    geo:syntax="WSEN bounding box in decimal degrees" 
    geo:west="-5.8" 
    south="41" 
    geo:east="10" 
    geo:north="51.5" 
    geo:title="Country's name" /> 
    <defs><pattern id="hash2_4" width="6" h… 
    … 
</svg>

我仍然得到所有的錯誤（larger image）：

enter image description here

第一種類型的錯誤與自定義的<geo:g … >元素本身有關，可見於上面。 第二種類型的錯誤與自定義屬性相關，例如geo:west="…"或inkscape:group="…"，由於早期的xmlns聲明，我預計該屬性有效。

我走錯路了嗎？ 如何通過d3js使自定義屬性有效？

編輯：最小jsfiddle提供手推車輸出的演示。

來源

2015-02-10 Hugolpz

您使用的是HTML文檔或XML（XHTML或SVG）？自定義名稱空間和'xmlns'屬性僅在XML中有效。在HTML文檔中使用SVG的非官方方式是使用HTML'data- *'屬性。但是，它可能仍然會失敗一個驗證器。 – AmeliaBR 2015-02-10 05:17:57

* Ting !!! *這是一個很好的線索。 :) – Hugolpz 2015-02-10 11:51:10

使用xml。我的文件頭以'<？xml version =「1.0」standalone =「no」？><！DOCTYPE svg PUBLIC「開頭 - // W3C // DTD SVG 1.1 // EN」「http：//www.w3 .org/Graphics/SVG/1.1/DTD/svg11.dtd「> Hugolpz 2015-02-11 02:42:54

我做了一些溫和的成功嘗試。

1）閱讀：以產生可以被挽救的有效SVG文檔，@Selim指出d3.ns.prefix不適合（見d3 doesn't append namespace attributes to svg element）。

2）閱讀更多：所以我看了Namespaces Crash Course。關鍵的一點是，

[...]命名空間前綴用來前綴屬性名稱和標籤[元]名稱[...]

從申報和慣例的官方文檔，爲屬性（<script>變爲<a>）：

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <a xlink:href="space-rocket.html">...</a> 
</svg>

和元素：

<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:svg="http://www.w3.org/2000/svg"> 
    <body> 
    <h1>SVG embedded inline in XHTML</h1> 
    <svg:svg width="300px" height="200px"> 
     <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/> 
    </svg:svg> 
    </body> 
</html>

2）Porting：所以我繼續前進，而不是d3.ns.前綴，但與手工定製命名空間（「地理」）聲明爲經由到SVG元素的屬性：

d3.select("svg").attr(":xmlns:geo","http://www.example.com/something/")

連同用途，例如

svg.append("geo").attr("id","geo") 
    .attr('manual', "WSEN bounding box in decimal degrees") 
    .attr('WEST', "-4.05") 
    .attr('SOUTH', "40.5") 
    .attr('EAST', "10.0") 
    .attr('NORTH', "54.5") 
    .attr('Title', "Imaginary map of Kinglons ruling Europe");

或

svg.append("geo").attr("id","geo") 
    .attr(':geo:manual', "WSEN bounding box in decimal degrees") 
    .attr(':geo:WEST', "-4.05") 
    .attr(':geo:SOUTH', "40.5") 
    .attr(':geo:EAST', "10.0") 
    .attr(':geo:NORTH', "54.5") 
    .attr(':geo:Title', "Imaginary map of Kinglons ruling Europe");

或

svg.append(":geo:geo").attr("id","geo") 
    .attr(':geo:manual', "WSEN bounding box in decimal degrees") 
    .attr(':geo:WEST', "-4.05") 
    .attr(':geo:SOUTH', "40.5") 
    .attr(':geo:EAST', "10.0") 
    .attr(':geo:NORTH', "54.5") 
    .attr(':geo:Title', "Imaginary map of Kinglons ruling Europe");

和約3個其他變體，但無效，都失敗了svg驗證程序。

我沒有更多的想法如何獲得有效的SVG。

enter image description here

Fiddle（可下載），svg validator

來源

2015-02-14 23:27:53 Hugolpz

html不支持或不允許您想要的名稱空間。 XML（即xhtml）。除非您將文檔作爲application/xhtml + xml並將您的整個代碼xhtml提供，否則您將永遠無法使用此功能。我已經在http://stackoverflow.com/questions/24612067/中說過這個，但你似乎並不相信它。 – 2015-02-15 07:23:49

@robertLongson：感謝您的反饋，我只是難以理解，我的道歉。在實踐中... 1）我的主頁接收d3 svg應該從html更改爲xhtml，對不對？ 2）你是否看到我的小提琴可以讓你下載一個XML svg文件（ns應該在哪裏工作），它本身並沒有通過有效性檢查。 – Hugolpz 2015-02-15 08:05:52

關於d3js和命名空間。根據Selvin在D3 doesn't append xmlns:something namespace properly to svg element，這是D3js know bug已知但尚未實施的解決方案。此外，目前的方法來克服它是via JQuery

來源

2015-03-02 22:02:59 Hugolpz

D3不應該。如果文檔是XML文檔，那麼解析器將添加它，否則無論如何您都不能使用自定義名稱空間。 – 2015-03-02 22:41:29

確實，我試圖申請@Selvin的方法沒有成功。 http://jsfiddle.net/99dex43s/20/ – Hugolpz 2015-03-02 23:14:47

@RobertLongson：作爲專家，你的解釋對於像我這樣觸摸xml＆svg的人來說是不夠實用的。我經腸道不清楚你的技術解釋。 – Hugolpz 2015-03-02 23:44:36

自定義svg元素或屬性的D3和SVG命名空間是否有效？

回答

相關問題