Question

这就是我在下面的内容。它只是显示黑色。它假设只是一个绿色的气球。

我使用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>

Answer 1

问候user3298578，

我不完全确定从您的原始作品到您的代码中的一系列路径和属性的过程是什么过程，但有一些明显的问题阻止它出现在你想要的地方。

除了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');

解决这类问题的一个很好的归纳方法是一次注释掉除了一条路径以外的所有路径，这样你就可以看到哪些元素是哪个。

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

1 个答案:

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

1 个答案:

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