html - 传单控件内的 svg

Question

我正在尝试在传单控件中创建一个 svg，但我认为我的 css/html 知识让我失望:浏览器检查器将 svg 的大小报告为 0x0。我可以通过将 svg 位置属性设置为绝对来破解它，并且检查器报告我设置的高度/宽度，但是我在 svg 内渲染的圆圈的大小仍然为 0x0。

http://jsfiddle.net/n8L9ojej/4/

// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {maxZoom: 18}).addTo(map);

// add a marker in the given location
L.marker([36.83711,-2.464459]).addTo(map);

var control = L.control();
control.onAdd = function(map){
    this.div = L.DomUtil.create("div");             this.div.setAttribute("style","height:100px;width:100px;background:white");
         return this.div;   
};

control.addTo(map);


svg = L.DomUtil.create("svg","test",control.div);
svg.setAttribute("style","height:90px;width:90px;");

d3.select(".test").append("circle")
    .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 50)
        .attr("cx", 50)
        .attr("cy", 50);

Controller 在右上角。

Answer 1

根据leaflet documentation L.DomUtil.create 总是返回一个 HTMLElement。

SVG 元素属于 SVGElement 类型，因此 L.DomUtil.create 似乎无法创建这些元素。 leaflet 实际上做的是创建一个带有标签名称 svg 的 html 元素。

您可能会发现 learning more about namespaces很有用。

d3 同样适用于 SVG 和 html 元素，但浏览器只会渲染在正确的命名空间中创建的元素，因此具有标签名称 p 的 SVG 元素将不会用作 html 段落，也不会用作 html 元素标签名称行不会用作 SVG 行。

有些元素具有相同的标签名称但功能不同，这就是为什么命名空间是必需的，例如SVG 元素和 html 元素。