Reputation: 11

Simple SVG conversion to Raphael.js with custom paths. (Not working)

This is what I have below. It keeps just showing up black. It's suppose to just be a green balloon.

I used Google Drive Drawing program to export as SVG, then I optimized it to having 1 decimal, and then I used a converter ( http://www.readysetraphael.com/ ) to turn the SVG into eligible rapheal coding with IDs.

Can anyone figure out why the code keeps showing up black? What am I doing wrong. :/

<!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>

Upvotes: 0

Answers (1)

Kevin Nielsen

Reputation: 4433

Greetings user3298578,

I'm not entirely sure what process led you from your original artwork to the series of paths and attributes in your code, but there are a few obvious problems preventing it from showing up as you'd like.

The fill values for all of your paths except path_b are -- you guessed it -- black (more specifically, #000000).
You have two redundant paths (for the balloon shape and the string). Because SVGs render in "painter's order", from back to front, the second of each of these paths is covering the one that came before it.

Try this instead:

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

A good inductive approach to working out issues like this is to comment out all but one path at a time so you can see which elements are which.

Upvotes: 1

Simple SVG conversion to Raphael.js with custom paths. (Not working)

Answers (1)

Related Questions