在 mhtml5 svg 中绘制球体答案

【问题标题】：drawing sphere in mhtml5 svg在 mhtml5 svg 中绘制球体
【发布时间】：2016-01-31 09:18:03
【问题描述】：

我想在 html5 中绘制一个气泡（实际上有很多气泡，但让我们先使用一个），我想使用 svg 因为我想缩放气泡并且不需要纹理它们所以 svg 更好选项在这里。

但是我没有发现任何关于在纯 html5 和 javascript 中在 svg 中做球体的事情，我发现的主要是像 this question 这样的画布或像 this 这样的 webgl，这两个都是基于光栅的，在这里，基于矢量对我来说更好。

有没有办法做到这一点？还是我坚持使用圆圈代替？

【问题讨论】：

看起来像球体的圆可以工作吗？
我是个失败者，这是我最好的尝试，绝不正确jsfiddle.net/4p18mxg9/11
@AdamBuchananSmith 它一定看起来像一个泡沫，我不知道这是否可能。您提供的链接有些完美（我将控制颜色使其看起来像气泡）但是没有任何类型的 3D 内置 html5 吗？没有“z”吗？
@AdamBuchananSmith - 如此简单而有效。我希望你能把它作为答案发布，也许有一个小的解释和一个 sn-p，这样我就可以投票了。这当然对我有帮助。

标签： html svg

【解决方案1】：

不幸的是，这有点晚了，但我希望它能帮助寻找类似东西的人。您不会为此找到独立的解决方案（或者您必须编写自己的 javascript 实现来处理创建球体所需的所有数学运算），但您可以使用 D3.js 库并使用 .geo（几何）扩展名（由默认为D3.js) 一个很好的例子是这样的：

var width = 500, height = width, 
    projection, path,
    svg, features, graticule;

projection = d3.geo.orthographic()
    .translate([width / 2, height / 2])
    .scale(250)
    .clipAngle(90)
    .precision(0.1)
    .rotate([0, -30]);

path = d3.geo.path()
    .projection(projection);

svg = d3.select('.globe')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('viewBox', '0, 0, ' + width + ', ' + height);

features = svg.append('g');

features.append('path')
    .datum({type: 'Sphere'})
    .attr('class', 'background')
    .attr('d', path);

graticule = d3.geo.graticule();

features.append('path')
  .datum(graticule)
  .attr('class', 'graticule')
  .attr('d', path);

svg {
    width: 100%
}

path {
    fill: none;
    stroke: black
}

.background {
  fill: rgba(200,212,220,.5);
  stroke-width: .8px;
  stroke: black;
}

.graticule {
    stroke: rgba(0,0,0, .2);
    stroke-width: .5px;
}

.country {
    cursor: pointer;
}

.country .land, .state .land {
    fill: white;
    stroke: rgba(0,0,0, .2);
    stroke-width .3px;
}

.state .overlay {
    fill: blue;
    fill-opacity: 0;
}

.country .overlay {
    fill: orange;
    fill-opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div class="globe"></div>

我想在下面的教程中，您会发现示例的第 2 版是您使用的最佳选择：

http://jsfiddle.net/GordyD/uwp5vu87/2/

【讨论】：