與Raphael奇怪地渲染SVGs嗎？

我們有一個使用Raphael操縱SVG的在線設計師。我們正在準備一個大型的剪貼畫庫來用於此目的，但遇到了一個非常奇怪的問題。與Raphael奇怪地渲染SVGs嗎？

一些SVG遇到了一個問題，它們在瀏覽器中渲染得很好，但是一旦我們將它們拉入Raphael，它們就會變得完全無法識別。

這裏的展示效果的圖像： enter image description here

下面是對SVG的代碼（從.AI文件由插畫家出口產生）：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="100px" height="83.641px" viewBox="0 0 100 83.641" enable-background="new 0 0 100 83.641" xml:space="preserve"> 
<polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 
    58.263,0.056 "/> 
</svg>

來源

2012-04-11 Walker

看來，您將文件導入路徑的過程可能存在缺陷，或者應用了一些未考慮的轉換。例如，該代碼工作正常：

var paper = Raphael("paper"); 
paper.path(
    "M58.263,0.056 L100,41.85 L58.263,83.641 L30.662,83.641 " + 
    "L62.438,51.866 L0,51.866 L0,31.611 L62.213,31.611 30.605,0" 
).attr({ 'fill': 'black' });

見http://jsfiddle.net/sgMH6/

你怎麼「拉」這些文件拉斐爾？你的過程/代碼是什麼？

編輯：更多信息;導入插件是https://github.com/wout/raphael-svg-import/blob/master/raphael-svg-import.js

看來您使用的插件可能有錯誤的多邊形實現例程。這是一個預感，但是，看起來像0號碼沒有被正確處理。您的SVG圖形確實包含一些零座標。

在功能Raphael.fn.polygon，有可能是這樣的一個部分：

 var d = parseFloat(c[j]); 
    if (d) 
     poly.push(d);

如果更改了這一點，相反，它會爲你工作：

var d = parseFloat(c[j]); 
    if (!d) d = 0; 
    poly.push(d);

這是一個非常基本的修復，它可能會打破其他的事情。無論如何，看看一個修改過的插件修復工作示例 - http://jsfiddle.net/pkzGJ/;如果這確實是一個錯誤，你應該將它提交給插件作者。

來源

2012-04-11 21:07:03 pp19dd

謝謝答覆pp19dd - 我們正在等待主要負責拉斐爾的開發人員來準確回答您的問題！將在3-4小時內得到答案！ – Walker 2012-04-11 22:02:16

我們使用Raphael SVG Import插件來繪製藝術。 https://github.com/wout/raphael-svg-import – Walker 2012-04-12 14:18:12

增加了一個潛在的解決方案。問候， - 迪諾。 – pp19dd 2012-04-12 16:20:43

與Raphael奇怪地渲染SVGs嗎？

回答

相關問題