使用自定义路径将简单的 SVG 转换为 Raphael.js。（不工作）答案

【问题标题】：Simple SVG conversion to Raphael.js with custom paths. (Not working)使用自定义路径将简单的 SVG 转换为 Raphael.js。（不工作）
【发布时间】：2014-03-23 04:42:33
【问题描述】：

这就是我下面的内容。它一直显示为黑色。它应该只是一个绿色气球。

我使用 Google Drive Drawing 程序导出为 SVG，然后将其优化为 1 位小数，然后使用转换器 (http://www.readysetraphael.com/) 将 SVG 转换为符合条件的带 ID 的 rapheal 编码。

谁能弄清楚为什么代码总是显示为黑色？我究竟做错了什么。：/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="raphael-min.js"></script>

  <script>
    window.onload = function () {

    var rsr = Raphael('rsr', '960.0', '720.0');

var path_a = rsr.path("m0 0l960.0 0l0 720.0l-960.0 0z");
path_a.attr({fill: '#000000',"fill-opacity": '0.0',"fill-rule": 'nonzero','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_a');

var path_b = rsr.path("m385.55905 232.77165l0 0c0 -53.4 42.3 -96.7 94.4 -96.66142l0 0c25.047302 0 49.1 10.2 66.8 28.311478c17.71112 18.1 27.7 42.7 27.7 68.349945l0 0c0 53.4 -42.3 96.7 -94.4 96.66142l0 0c-52.158295 0 -94.4 -43.3 -94.4 -96.66142z");

path_b.attr({fill: '#6aa84f',"fill-rule": 'nonzero','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_b');

      var path_c = rsr.path("m385.55905 232.77165l0 0c0 -53.4 42.3 -96.7 94.4 -96.66142l0 0c25.047302 0 49.1 10.2 66.8 28.311478c17.71112 18.1 27.7 42.7 27.7 68.349945l0 0c0 53.4 -42.3 96.7 -94.4 96.66142l0 0c-52.158295 0 -94.4 -43.3 -94.4 -96.66142z");


path_c.attr({stroke: '#000000',"stroke-width": '2',"stroke-linejoin": 'round',"stroke-linecap": 'butt',"fill-rule": 'nonzero','stroke-opacity': '1','fill': '#000000'}).data('id', 'path_c');

      var path_d = rsr.path("m445.08472 239.69165l0 -13.59375l5.109375 0q1.546875 0 2.5 0.40625q0.953125 0.4 1.5 1.65625q0.53125 0.9 0.5 1.796875q0 0.9 -0.5 1.65625q-0.46875 0.8 -1.4 1.234375q1.234375 0.4 1.9 1.234375q0.671875 0.9 0.7 2.0625q0 1 -0.4 1.78125q-0.390625 0.8 -1 1.265625q-0.59375 0.4 -1.5 0.671875q-0.890625 0.2 -2.2 0.21875l-5.1875 0zm1.796875 -7.890625l2.9375 0q1.203125 0 1.7 -0.15625q0.6875 -0.2 1 -0.671875q0.359375 -0.5 0.4 -1.1875q0 -0.7 -0.3 -1.1875q-0.328125 -0.5 -0.9 -0.703125q-0.59375 -0.2 -2.1 -0.203125l-2.71875 0l0 4.109375zm0 6.28125l3.390625 0q0.875 0 1.2 -0.0625q0.625 -0.1 1 -0.359375q0.421875 -0.3 0.7 -0.765625q0.265625 -0.5 0.3 -1.140625q0 -0.8 -0.4 -1.328125q-0.390625 -0.6 -1.1 -0.78125q-0.6875 -0.2 -2 -0.234375l-3.15625 0l0 4.671875zm16.943573 0.390625q-0.9375 0.8 -1.8 1.125q-0.859375 0.3 -1.8 0.3125q-1.609375 0 -2.5 -0.78125q-0.875 -0.8 -0.9 -2.03125q0 -0.7 0.3 -1.328125q0.328125 -0.6 0.9 -0.953125q0.53125 -0.4 1.2 -0.546875q0.5 -0.1 1.5 -0.25q2.03125 -0.2 3 -0.578125q0 -0.3 0 -0.4375q0 -1 -0.5 -1.4375q-0.640625 -0.6 -1.9 -0.5625q-1.171875 0 -1.7 0.40625q-0.5625 0.4 -0.8 1.46875l-1.640625 -0.234375q0.234375 -1 0.7 -1.6875q0.515625 -0.6 1.5 -0.984375q0.96875 -0.4 2.2 -0.359375q1.265625 0 2 0.296875q0.78125 0.3 1.2 0.75q0.375 0.5 0.5 1.140625q0.09375 0.4 0.1 1.53125l0 2.234375q0 2.3 0.1 2.953125q0.109375 0.6 0.4 1.171875l-1.75 0q-0.265625 -0.5 -0.3 -1.21875zm-0.140625 -3.71875q-0.90625 0.4 -2.7 0.625q-1.03125 0.1 -1.5 0.328125q-0.421875 0.2 -0.7 0.546875q-0.234375 0.4 -0.2 0.796875q0 0.7 0.5 1.125q0.515625 0.4 1.5 0.4375q0.96875 0 1.7 -0.421875q0.75 -0.4 1.1 -1.15625q0.265625 -0.6 0.3 -1.671875l0 -0.609375zm4.0476074 4.9375l0 -13.59375l1.671875 0l0 13.59375l-1.671875 0zm4.144806 0l0 -13.59375l1.671875 0l0 13.59375l-1.671875 0zm3.5510864 -4.921875q0 -2.7 1.5 -4.0625q1.265625 -1.1 3.1 -1.09375q2.03125 0 3.3 1.34375q1.296875 1.3 1.3 3.671875q0 1.9 -0.6 3.0q-0.5625 1.1 -1.7 1.6875q-1.078125 0.6 -2.4 0.59375q-2.0625 0 -3.3 -1.328125q-1.28125 -1.3 -1.3 -3.8125zm1.71875 0q0 1.9 0.8 2.828125q0.828125 0.9 2.1 0.9375q1.25 0 2.1 -0.9375q0.828125 -1 0.8 -2.890625q0 -1.8 -0.8 -2.765625q-0.828125 -0.9 -2.1 -0.9375q-1.25 0 -2.1 0.9375q-0.828125 0.9 -0.8 2.828125zm8.656952 0q0 -2.7 1.5 -4.0625q1.265625 -1.1 3.1 -1.09375q2.03125 0 3.3 1.34375q1.296875 1.3 1.3 3.671875q0 1.9 -0.6 3.0q-0.5625 1.1 -1.7 1.6875q-1.078125 0.6 -2.4 0.59375q-2.0625 0 -3.3 -1.328125q-1.28125 -1.3 -1.3 -3.8125zm1.71875 0q0 1.9 0.8 2.828125q0.828125 0.9 2.1 0.9375q1.25 0 2.1 -0.9375q0.828125 -1 0.8 -2.890625q0 -1.8 -0.8 -2.765625q-0.828125 -0.9 -2.1 -0.9375q-1.25 0 -2.1 0.9375q-0.828125 0.9 -0.8 2.828125zm9.281982 4.921875l0 -9.859375l1.5 0l0 1.40625q1.09375 -1.6 3.1 -1.625q0.890625 0 1.6 0.328125q0.75 0.3 1.1 0.84375q0.375 0.5 0.5 1.21875q0.09375 0.5 0.1 1.625l0 6.0625l-1.671875 0l0 -6.0q0 -1 -0.2 -1.515625q-0.1875 -0.5 -0.7 -0.8125q-0.5 -0.3 -1.2 -0.296875q-1.0625 0 -1.8 0.671875q-0.765625 0.7 -0.8 2.578125l0 5.375l-1.671875 0zm16.203827 0l-1.671875 0l0 -10.640625q-0.59375 0.6 -1.6 1.15625q-0.984375 0.6 -1.8 0.859375l0 -1.625q1.40625 -0.7 2.5 -1.59375q1.046875 -0.9 1.5 -1.8125l1.078125 0l0 13.65625z");
path_d.attr({fill: '#000000',"fill-rule": 'nonzero','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_d');
var path_e = rsr.path("m478.88977 330.55643c-3.1483154 12.5 -24.1 48.1 -18.9 75.0c5.185028 26.9 48.1 56.9 50 86.66666c1.8521423 29.7 -32.4 76.4 -38.9 91.7");
path_e.attr({fill: '#000000',"fill-opacity": '0.0',"fill-rule": 'nonzero','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_e');
var path_f = rsr.path("m478.88977 330.55643c-3.1483154 12.5 -24.1 48.1 -18.9 75.0c5.185028 26.9 48.1 56.9 50 86.66666c1.8521423 29.7 -32.4 76.4 -38.9 91.7");

path_f.attr({stroke: '#000000',"stroke-width": '2',"stroke-linejoin": 'round',"stroke-linecap": 'butt',"fill-rule": 'nonzero','stroke-opacity': '1','fill': '#000000'}).data('id', 'path_f');

    };  

  </script>
  <style>
  </style>
</head>
<body>
  <div id="rsr"></div>  
</body>
</html>

【问题讨论】：

标签： svg raphael jquery-svg

【解决方案1】：

问候用户 3298578，

我不完全确定是什么过程将您从原始作品引导到代码中的一系列路径和属性，但有一些明显的问题阻止它按您的意愿显示。

除了path_b 之外的所有路径的填充值都是——你猜对了——黑色（更具体地说，#000000）。
您有两个冗余路径（用于气球形状和字符串）。因为 SVG 按“画家的顺序”渲染，从后到前，每条路径中的第二条都覆盖了之前的一条。

试试这个：

var path_balloon = rsr.path("m385.55905 232.77165l0 0c0 -53.4 42.3 -96.7 94.4 -96.66142l0 0c25.047302 0 49.1 10.2 6 6.8 28.311478c17.71112 18.1 27.7 42.7 27.7 68.349945l0 0c0 53.4 -42.3 96.7 -94.4 96.66142l0 0c-52.158295 0 -94.4 -43.3 -94.4 -96.66142z");
path_balloon.attr({stroke: '#000000',"stroke-width": '2',"stroke-linejoin": 'round',"stroke-linecap": 'butt','stroke-opacity': '1','fill': '#00FF00'}).data('id', 'path_balloon');

var path_label = rsr.path("m445.08472 239.69165l0 -13.59375l5.109375 0q1.546875 0 2.5 0.40625q0.953125 0.4 1.5 1.65625q0.53125 0.9 0.5 1.796875q0 0.9 -0.5 1.65625q-0.46875 0.8 -1.4 1.234375q1.234375 0.4 1.9 1.234375q0.671875 0.9 0.7 2.0625q0 1 -0.4 1.78125q-0.390625 0.8 -1 1.265625q-0.59375 0.4 -1.5 0.671875q-0.890625 0.2 -2.2 0.21875l-5.1875 0zm1.796875 -7.890625l2.9375 0q1.203125 0 1.7 -0.15625q0.6875 -0.2 1 -0.671875q0.359375 -0.5 0.4 -1.1875q0 -0.7 -0.3 -1.1875q-0.328125 -0.5 -0.9 -0.703125q-0.59375 -0.2 -2.1 -0.203125l-2.71875 0l0 4.109375zm0 6.28125l3.390625 0q0.875 0 1.2 -0.0625q0.625 -0.1 1 -0.359375q0.421875 -0.3 0.7 -0.765625q0.265625 -0.5 0.3 -1.140625q0 -0.8 -0.4 -1.328125q-0.390625 -0.6 -1.1 -0.78125q-0.6875 -0.2 -2 -0.234375l-3.15625 0l0 4.671875zm16.943573 0.390625q-0.9375 0.8 -1.8 1.125q-0.859375 0.3 -1.8 0.3125q-1.609375 0 -2.5 -0.78125q-0.875 -0.8 -0.9 -2.03125q0 -0.7 0.3 -1.328125q0.328125 -0.6 0.9 -0.953125q0.53125 -0.4 1.2 -0.546875q0.5 -0.1 1.5 -0.25q2.03125 -0.2 3 -0.578125q0 -0.3 0 -0.4375q0 -1 -0.5 -1.4375q-0.640625 -0.6 -1.9 -0.5625q-1.171875 0 -1.7 0.40625q-0.5625 0.4 -0.8 1.46875l-1.640625 -0.234375q0.234375 -1 0.7 -1.6875q0.515625 -0.6 1.5 -0.984375q0.96875 -0.4 2.2 -0.359375q1.265625 0 2 0.296875q0.78125 0.3 1.2 0.75q0.375 0.5 0.5 1.140625q0.09375 0.4 0.1 1.53125l0 2.234375q0 2.3 0.1 2.953125q0.109375 0.6 0.4 1.171875l-1.75 0q-0.265625 -0.5 -0.3 -1.21875zm-0.140625 -3.71875q-0.90625 0.4 -2.7 0.625q-1.03125 0.1 -1.5 0.328125q-0.421875 0.2 -0.7 0.546875q-0.234375 0.4 -0.2 0.796875q0 0.7 0.5 1.125q0.515625 0.4 1.5 0.4375q0.96875 0 1.7 -0.421875q0.75 -0.4 1.1 -1.15625q0.265625 -0.6 0.3 -1.671875l0 -0.609375zm4.0476074 4.9375l0 -13.59375l1.671875 0l0 13.59375l-1.671875 0zm4.144806 0l0 -13.59375l1.671875 0l0 13.59375l-1.671875 0zm3.5510864 -4.921875q0 -2.7 1.5 -4.0625q1.265625 -1.1 3.1 -1.09375q2.03125 0 3.3 1.34375q1.296875 1.3 1.3 3.671875q0 1.9 -0.6 3.0q-0.5625 1.1 -1.7 1.6875q-1.078125 0.6 -2.4 0.59375q-2.0625 0 -3.3 -1.328125q-1.28125 -1.3 -1.3 -3.8125zm1.71875 0q0 1.9 0.8 2.828125q0.828125 0.9 2.1 0.9375q1.25 0 2.1 -0.9375q0.828125 -1 0.8 -2.890625q0 -1.8 -0.8 -2.765625q-0.828125 -0.9 -2.1 -0.9375q-1.25 0 -2.1 0.9375q-0.828125 0.9 -0.8 2.828125zm8.656952 0q0 -2.7 1.5 -4.0625q1.265625 -1.1 3.1 -1.09375q2.03125 0 3.3 1.34375q1.296875 1.3 1.3 3.671875q0 1.9 -0.6 3.0q-0.5625 1.1 -1.7 1.6875q-1.078125 0.6 -2.4 0.59375q-2.0625 0 -3.3 -1.328125q-1.28125 -1.3 -1.3 -3.8125zm1.71875 0q0 1.9 0.8 2.828125q0.828125 0.9 2.1 0.9375q1.25 0 2.1 -0.9375q0.828125 -1 0.8 -2.890625q0 -1.8 -0.8 -2.765625q-0.828125 -0.9 -2.1 -0.9375q-1.25 0 -2.1 0.9375q-0.828125 0.9 -0.8 2.828125zm9.281982 4.921875l0 -9.859375l1.5 0l0 1.40625q1.09375 -1.6 3.1 -1.625q0.890625 0 1.6 0.328125q0.75 0.3 1.1 0.84375q0.375 0.5 0.5 1.21875q0.09375 0.5 0.1 1.625l0 6.0625l-1.671875 0l0 -6.0q0 -1 -0.2 -1.515625q-0.1875 -0.5 -0.7 -0.8125q-0.5 -0.3 -1.2 -0.296875q-1.0625 0 -1.8 0.671875q-0.765625 0.7 -0.8 2.578125l0 5.375l-1.671875 0zm16.203827 0l-1.671875 0l0 -10.640625q-0.59375 0.6 -1.6 1.15625q-0.984375 0.6 -1.8 0.859375l0 -1.625q1.40625 -0.7 2.5 -1.59375q1.046875 -0.9 1.5 -1.8125l1.078125 0l0 13.65625z");
path_label.attr({fill: '#0000FF','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_label');


var path_string = rsr.path("m478.88977 330.55643c-3.1483154 12.5 -24.1 48.1 -18.9 75.0c5.185028 26.9 48.1 56.9 50 86.66666c1.8521423 29.7 -32.4 76.4 -38.9 91.7");
path_string.attr({stroke: '#000000',"stroke-width": '2',"stroke-linejoin": 'round',"stroke-linecap": 'butt','stroke-opacity': '1','fill': 'none'}).data('id', 'path_string');

解决此类问题的一种很好的归纳方法是一次注释掉除一条路径之外的所有路径，以便您可以查看哪些元素是哪些。

【讨论】：

非常感谢您的回复！虽然，当我插入您的代码时，形状并没有按照应有的方式成型。我按照你的建议做了，我开始注释代码片段以弄清楚发生了什么。我设法修复了代码，但是如果转换器完全更改了代码并将其搞砸了，我仍然感到困惑，1）它不是一个非常转换器..和 2）我还想如何操作定制的 svg 对象..不只使用 html 中的路径？
你好。您是否有一个显示图像应该外观的原始 svg 文件？自动操作可能会出现各种各样的问题，所以很高兴看到我们从哪里开始。
这很奇怪。当我根据上面的回答进行上演时，这几乎就是我得到的（当然，不同的颜色和尺寸）：voidblossom.com/tests/so.html