相关疑难解决方法(0)

如何创建这样的形状以显示在网页上？

我不想使用图像,因为它们会在缩放时变得模糊

我试过CSS:

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="tear">
</div>

结果真是搞砸了.

然后我尝试使用SVG:

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

它确实得到了形状,但底部没有弯曲.

有没有办法创建这个形状,以便它可以在HTML页面中使用？

我是d3.js的新手.我想通过两种方法来绘制对象 - SVG和Canvas. 我的用例大约是<100个节点和边缘.我已经尝试过几个使用canvas的例子,它看起来很棒.

我看到有关于SVG和Canvas之间差异的SO帖子.

两者似乎都适合我使用,但是,我倾向于画布(因为我已经很少有例子工作).如果我在d3.js上下文中遗漏任何内容,请纠正我吗？

我主要是因为图书馆的膨胀而严重追求ProcessingJS.我发现像Ball Droppings这样的碎片不使用库的Processing语法解析器,这很好,因为我想它会减慢页面的速度,特别是增加初始加载和设置时间.不过,我想知道是否值得将它用作UnderscoreJS这样的大型实用程序库.例如,与今天像RaphaelJS一样的其他库相比,SVG的实现有多好？有没有人足够广泛地完成Processing API的实现？当我浏览时,我看到了很多我不需要的样板,以及一些可疑的编码实践.但图书馆似乎仍然存在 至少在ProcessingJS主页上表现得不错,尽管示例设置为以15fps运行,而不是(在我看来)最低可接受的24fps.

请告诉我您对HTML5 Canvas与SVG/VML的看法如何？比较中给我优缺点.

谢谢!!!