SVG路径有奇怪的圆角块

Question

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

我使用了一个我在网上找到的jsfiddle并尝试根据我的用途进行自定义。 这是：http://jsfiddle.net/qs7FY/

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

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

提前致谢！

请参阅下面的屏幕截图中的问题

请在此处查看问题

Answer 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后看到 - ＆gt; 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

Answer 2

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

圆角线只是图案拼贴问题。您可能会通过自己绘制图案图块然后尝试平铺它（切除溢出图案图块的所有内容）来实现您所做的错误。为了便于说明，您可以尝试搜索“无缝瓷砖”。