具有奇怪圆角块的 SVG 路径答案

【问题标题】：SVG Path having weird rounded-corner blocks具有奇怪圆角块的 SVG 路径
【发布时间】：2012-07-19 16:04:00
【问题描述】：

我是 SVG 新手，所以这可能不是很奇怪，但谁能帮我解决 Highcharts 和 SVG 的问题。

我使用了一个在网上找到的 jsfiddle，并尝试对其进行自定义以适应我的使用。这里是：http://jsfiddle.net/qs7FY/

我面临的问题是在结果面板中看到的圆角线块。

有人可以帮我解决这个问题吗？

提前致谢！

在下面的截图中查看问题

在这里查看问题

【问题讨论】：

为 jsfiddle 加油......谢谢

标签： javascript jquery svg highcharts

【解决方案1】：

将此添加到代码的末尾

   $('svg path ').each(function(index,value) {
    var myd = $(this).attr('d') ; 
    var indexofc = myd.indexOf('C') ; 
    var indexofL = myd.indexOf('L') - 1 ; 
    if(indexofc != -1){
     var final = myd.slice(indexofc ,indexofL) ;
    }
    var end = myd.replace(final ,'') ; 
    $(this).attr('d',end) ;

   });

修复jsFiddle后的图表

更新

使你的线条弯曲的原因是在你的线条中添加C = curveto，所以如果我删除它们，它们将是直的，正如你在更新你的 jsfiddle 后看到的那样 -> http://jsfiddle.net/minagabriel/qs7FY/9/

这是您的路径之一与C 的样子

  <path fill="none" d="M 102.29523731301347 84.2399490981872 
   C 107.29523731301347 
   84.2399490981872 113.95649598906613 88.67025753561153 123.11572666863853 
    94.76193163706998 L 132.27495734821093 100.85360573852843"
   stroke-width="1" 
   stroke="#004c67" visibility="visible" zIndex="3" transform="translate(10,40)">
       </path>

所以我循环遍历你的 d 元素，取出 C 和 L 之间的所有内容，最终得到如下内容：

       <path fill="none" d="M 102.29523731301347 84.2399490981872 
   L 132.27495734821093 100.85360573852843"
   stroke-width="1" 
   stroke="#004c67" visibility="visible" zIndex="3" transform="translate(10,40)">
       </path>

这应该是曲线...请考虑查看 jsFiddle

【讨论】：

你能解释一下你刚刚做了什么吗？谢谢！
..and...我仍然在最后看到那些圆角线块。

【解决方案2】：

这已在 svg-developers 邮件列表中进行了讨论，有关一些解决方案，请参阅 here。

圆顶线只是图案拼贴问题。您可能会通过自己绘制图案瓷砖然后尝试平铺它（切掉溢出图案瓷砖的所有东西）来意识到自己做错了什么。对于插图，您可以尝试搜索“无缝瓷砖”。

【讨论】：