ConnorAtherton / walkway

An easy way to animate SVG elements.
http://connoratherton.com/walkway
MIT License
4.37k stars 229 forks source link

Not drawing out an SVG path #13

Closed donpinkus closed 10 years ago

donpinkus commented 10 years ago

Walkway looks amazing, is it supposed to work on any SVG path or shape?

When I call draw on a path I exported from Illustrator, the SVG does not draw but just appears immediately. The callback to draw() is still successfully called however.

I added the below path to example/index.html. All other shapes do the "walkway" correctly, but this path just appears immediately.

<svg version="1.1" id="branch" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="576px" height="720px" viewBox="0 0 576 720" enable-background="new 0 0 576 720" xml:space="preserve">
  <path d="M567.33,492.045c-2.484-0.357-4.945-0.857-7.383-1.479c0.416-13.219,0.684-26.436-0.096-39.646
    c-1.564-26.566-7.203-52.955-15.348-77.391c-4.152-12.455-8.938-24.637-14.783-35.927c-5.99-11.567-13.281-21.9-20.816-31.815
    c-2.572-3.383-5.176-6.728-7.777-10.077c-1.631-8.256-3.721-16.297-6.195-23.942c-0.896-2.773-4.449-1.558-3.539,1.258
    c1.648,5.098,3.127,10.384,4.416,15.795c-3.656-4.78-7.264-9.622-10.711-14.651c-0.83-1.213-1.654-2.448-2.479-3.694
    c-0.104-1.54-0.174-3.063-0.193-4.562c-0.031-2.643-2.793-2.994-3.502-1.051c-2.367-3.564-4.795-7.079-7.41-10.304
    c0.268-0.91,0.533-1.789,0.791-2.6c0.898-2.826-2.654-4.042-3.541-1.258c-0.051,0.162-0.104,0.339-0.154,0.504
    c-1.682-1.811-3.447-3.487-5.334-4.956c-3.07-2.392-5.957-5.134-8.768-8.013c0.062-0.289,0.139-0.571,0.197-0.862
    c0.521-2.556-2.057-3.832-3.15-2.222c-1.041-1.11-2.076-2.229-3.113-3.349c-0.084-1.36-1.115-2.543-2.139-2.303
    c-4.492-4.812-9.055-9.469-14.148-13.097c-1.004-0.715-2.02-1.393-3.041-2.055c1.422-2.334,2.773-4.733,4.035-7.198
    c1.309-2.555-1.871-4.922-3.168-2.388c-1.312,2.562-2.727,5.061-4.232,7.483c-3.973-2.395-8.018-4.591-11.984-7.028
    c-0.326-0.201-0.645-0.416-0.969-0.624c0.084-0.315,0.176-0.623,0.25-0.942c0.686-2.914-2.82-4.155-3.527-1.295
    c-3.766-2.721-7.389-5.723-11.234-8.294c-0.719-0.481-1.453-0.926-2.182-1.386c5.285-11.512,2.424-13.184,0.307-15.942
    c-0.555-0.721-1.549-0.955-2.225-0.37c-3.592,3.102-7.164,6.279-10.691,9.546c-14.188-6.382-29.432-9.521-44.391-10.5
    c-0.451-1.904-0.891-3.814-1.307-5.734c-0.633-2.935-4.176-1.687-3.539,1.259c0.309,1.429,0.646,2.844,0.977,4.265
    c-0.645-0.026-1.284-0.038-1.927-0.057c-0.664-0.713-1.684-0.893-2.397-0.065c-1.611-0.023-3.221-0.012-4.828,0.023
    c-0.652-1.15-1.83-0.859-2.539,0.095c-2.076,0.083-4.15,0.208-6.223,0.378c-0.236-1.827-0.531-3.592-0.918-5.264
    c-0.676-2.917-4.219-1.672-3.541,1.258c0.326,1.409,0.6,2.858,0.83,4.334c-2.385,0.249-4.768,0.551-7.145,0.895
    c-0.377-1.809-0.768-3.585-1.158-5.304c-0.66-2.925-4.201-1.68-3.539,1.258c0.336,1.489,0.682,3.035,1.02,4.606
    c-3.134,0.511-6.26,1.098-9.379,1.735c0.153-0.19,0.312-0.373,0.465-0.565c1.691-2.139-0.906-5.484-2.596-3.346
    c-1.078,1.364-2.19,2.673-3.315,3.962c-1.125-1.289-2.237-2.598-3.315-3.962c-1.689-2.138-4.287,1.207-2.596,3.346
    c0.153,0.193,0.312,0.376,0.466,0.566c-3.12-0.638-6.246-1.224-9.38-1.735c0.338-1.571,0.683-3.117,1.02-4.606
    c0.662-2.938-2.88-4.183-3.54-1.258c-0.39,1.719-0.78,3.496-1.157,5.304c-2.378-0.344-4.76-0.646-7.146-0.895
    c0.23-1.476,0.504-2.925,0.83-4.334c0.679-2.931-2.865-4.175-3.54-1.258c-0.387,1.672-0.682,3.438-0.918,5.264
    c-2.073-0.17-4.147-0.296-6.224-0.378c-0.708-0.955-1.887-1.245-2.538-0.095c-1.607-0.035-3.218-0.046-4.828-0.023
    c-0.714-0.83-1.734-0.649-2.399,0.065c-0.642,0.019-1.281,0.03-1.925,0.057c0.329-1.42,0.668-2.836,0.977-4.265
    c0.636-2.946-2.906-4.194-3.54-1.259c-0.415,1.92-0.855,3.831-1.307,5.734c-14.958,0.979-30.202,4.119-44.39,10.5
    c-3.527-3.267-7.1-6.444-10.691-9.546c-0.677-0.585-1.671-0.351-2.225,0.37c-2.117,2.758-4.979,4.43,0.307,15.942
    c-0.729,0.46-1.463,0.905-2.183,1.386c-3.846,2.571-7.468,5.574-11.234,8.294c-0.707-2.86-4.212-1.619-3.527,1.295
    c0.075,0.319,0.167,0.627,0.25,0.942c-0.323,0.208-0.642,0.423-0.969,0.624c-3.967,2.437-8.011,4.634-11.984,7.028
    c-1.505-2.423-2.919-4.921-4.231-7.483c-1.298-2.534-4.478-0.167-3.169,2.388c1.262,2.465,2.613,4.864,4.036,7.198
    c-1.021,0.663-2.038,1.34-3.041,2.055c-5.095,3.628-9.657,8.286-14.148,13.097c-1.023-0.24-2.056,0.943-2.14,2.303
    c-1.036,1.12-2.071,2.239-3.113,3.349c-1.094-1.61-3.672-0.333-3.15,2.222c0.06,0.291,0.136,0.573,0.198,0.862
    c-2.812,2.878-5.697,5.621-8.769,8.013c-1.887,1.469-3.651,3.145-5.333,4.956c-0.052-0.166-0.104-0.342-0.155-0.504
    c-0.886-2.784-4.438-1.567-3.54,1.258c0.258,0.812,0.523,1.69,0.791,2.6c-2.615,3.225-5.044,6.74-7.41,10.304
    c-0.71-1.943-3.471-1.591-3.503,1.051c-0.019,1.499-0.09,3.022-0.193,4.562c-0.823,1.246-1.647,2.48-2.479,3.694
    c-3.447,5.029-7.054,9.872-10.711,14.651c1.289-5.411,2.768-10.697,4.416-15.795c0.911-2.816-2.642-4.032-3.539-1.258
    c-2.474,7.645-4.563,15.687-6.194,23.942c-2.602,3.35-5.206,6.694-7.777,10.077c-7.536,9.915-14.826,20.248-20.816,31.815
    c-5.846,11.29-10.631,23.472-14.783,35.927c-8.145,24.436-13.783,50.824-15.348,77.391c-0.779,13.211-0.513,26.428-0.097,39.647
    c-2.437,0.621-4.898,1.12-7.383,1.478c-2.325,0.333-2.351,5.068,0,4.73c2.542-0.365,5.052-0.879,7.535-1.499
    c0.542,16.25,1.147,32.499,0.184,48.743c-0.93,1.239-1.841,2.511-2.731,3.817c-1.555,2.28,1.031,5.64,2.596,3.344
    c15.169-22.253,36.374-34.48,55.708-49.483c9.271-7.195,18.134-15.322,25.727-25.312c8.808-11.587,14.181-27.129,19.895-41.39
    c5.443-13.583,10.218-27.586,18.971-38.257c5.704-6.954,13.169-9.846,20.449-12.94c20.085-8.537,37.862-22.029,53.725-40.092
    c12.526-14.264,23.732-31.51,28.343-52.17c0.09,0.025,0.179,0.055,0.277,0.066c12.897,1.383,24.322-3.614,35.109-12.448
    c4.613-3.778,9.025-7.928,13.502-11.924c4.478,3.996,8.891,8.146,13.503,11.923c10.787,8.834,22.211,13.831,35.109,12.448
    c0.098-0.011,0.188-0.041,0.277-0.066c4.609,20.66,15.816,37.906,28.342,52.17c15.863,18.062,33.641,31.554,53.725,40.091
    c7.281,3.096,14.746,5.986,20.449,12.941c8.754,10.67,13.527,24.674,18.971,38.256c5.715,14.262,11.088,29.803,19.895,41.391
    c7.594,9.99,16.455,18.117,25.727,25.312c19.334,15.002,40.539,27.23,55.709,49.483c1.564,2.297,4.15-1.062,2.596-3.344
    c-0.891-1.307-1.803-2.578-2.732-3.816c-0.963-16.245-0.357-32.495,0.184-48.745c2.484,0.621,4.994,1.135,7.535,1.5
    C569.682,497.113,569.656,492.377,567.33,492.045z M445.832,266.411c2.188-7.871,5.209-15.224,7.398-23.054
    c1.791,1.742,3.627,3.4,5.535,4.899c0.715,0.562,1.418,1.137,2.107,1.726c-5.471,15.043-8.109,31.195-10.293,47.479
    C445.461,288.16,442.619,277.978,445.832,266.411z M394.887,181.449c0.99,1.249,0.047,4.732-2.016,9.27
    c-1.721-0.998-3.461-1.941-5.223-2.829C390.045,185.706,392.459,183.558,394.887,181.449z M393.982,196.927
    c4.73,3.217,9.273,6.791,14.109,9.951c-3.227,8.267-9.439,14.879-15.404,19.439c-2.86,2.188-5.97,4.249-9.212,5.824
    c-1.599-2.428-3.257-4.788-5.081-6.975c-0.582-0.697-1.175-1.382-1.773-2.059C382.641,214.475,389.699,204.846,393.982,196.927z
     M288.042,224.636c-3.438-1.997-6.802-4.408-9.637-7.492c-0.595-1.072-1.188-2.145-1.767-3.233
    c3.699-4.62,7.557-9.015,11.403-13.425c3.847,4.41,7.705,8.805,11.403,13.425c-0.578,1.087-1.171,2.16-1.766,3.231
    C294.845,220.227,291.48,222.639,288.042,224.636z M250.322,194.323c2.285,4.644,4.509,9.345,6.466,14.189
    c-0.839,6.987-2.502,13.338-6.058,18.077c-2.191,0.339-4.39,0.591-6.591,0.776c0.831-10.965,2.084-21.833,4.336-32.542
    C249.092,194.657,249.706,194.484,250.322,194.323z M216.422,210.904c1.397-1.509,2.843-2.925,4.387-4.13
    c2.769-2.162,5.758-3.858,8.812-5.306c-1.992,6.139-4.127,12.201-6.385,18.185C221.035,216.646,218.756,213.738,216.422,210.904z
     M277.543,187.989c0.312,0.397,0.632,0.784,0.947,1.178c-2.534,2.479-5.099,4.911-7.664,7.354c-0.038-2.45,0.113-4.935,0.386-7.412
    c2.022-0.51,4.044-1.025,6.068-1.528C277.352,187.721,277.439,187.856,277.543,187.989z M298.541,187.989
    c0.104-0.132,0.191-0.268,0.262-0.408c2.024,0.503,4.047,1.018,6.069,1.528c0.272,2.476,0.424,4.96,0.386,7.41
    c-2.564-2.442-5.129-4.875-7.663-7.353C297.909,188.772,298.229,188.387,298.541,187.989z M327.608,194.823
    c2.252,10.71,3.505,21.578,4.335,32.542c-2.201-0.185-4.399-0.437-6.59-0.776c-3.555-4.739-5.219-11.09-6.059-18.077
    c1.957-4.844,4.182-9.545,6.467-14.189C326.378,194.484,326.992,194.657,327.608,194.823z M346.463,201.468
    c3.055,1.447,6.044,3.144,8.812,5.306c1.543,1.205,2.989,2.621,4.387,4.129c-2.335,2.834-4.613,5.743-6.814,8.749
    C350.59,213.669,348.454,207.606,346.463,201.468z M358.514,182.954c7.191,1.553,14.367,3.562,21.332,6.407
    c-6.062,5.789-11.959,11.879-17.543,18.394c-5.23-5.622-11.309-9.374-17.701-12.175c-1.537-5.025-2.97-10.102-4.277-15.234
    C346.396,180.802,352.461,181.647,358.514,182.954z M323.779,180.036c0.627,2,1.204,4.008,1.744,6.021
    c-0.459,0.926-0.919,1.853-1.379,2.78c-1.984-0.541-3.979-1.043-5.973-1.552c-0.086-2.348-0.195-4.664-0.365-6.911
    C319.797,180.227,321.787,180.108,323.779,180.036z M303.795,181.974c0.118,0.636,0.23,1.275,0.34,1.917
    c-1.656-0.382-3.31-0.765-4.965-1.139C300.711,182.476,302.252,182.212,303.795,181.974z M272.29,181.974
    c1.542,0.239,3.082,0.502,4.622,0.777c-1.654,0.374-3.306,0.757-4.961,1.138C272.059,183.249,272.172,182.609,272.29,181.974z
     M252.305,180.037c1.991,0.072,3.981,0.19,5.972,0.338c-0.17,2.247-0.279,4.562-0.365,6.91c-1.993,0.509-3.988,1.011-5.972,1.552
    c-0.46-0.928-0.919-1.854-1.378-2.78C251.101,184.044,251.678,182.037,252.305,180.037z M217.571,182.954
    c6.052-1.306,12.117-2.151,18.188-2.609c-1.308,5.132-2.74,10.208-4.277,15.233c-6.393,2.801-12.472,6.554-17.701,12.176
    c-5.584-6.514-11.481-12.604-17.542-18.393C203.203,186.516,210.379,184.507,217.571,182.954z M181.198,181.45
    c2.428,2.108,4.841,4.257,7.238,6.441c-1.762,0.888-3.502,1.831-5.223,2.829C181.151,186.182,180.207,182.698,181.198,181.45z
     M182.102,196.928c4.283,7.918,11.341,17.547,17.361,26.18c-0.599,0.677-1.191,1.362-1.773,2.059
    c-1.824,2.187-3.482,4.547-5.082,6.976c-3.242-1.576-6.351-3.637-9.211-5.824c-5.965-4.56-12.179-11.172-15.405-19.439
    C172.828,203.718,177.372,200.145,182.102,196.928z M117.318,248.257c1.909-1.499,3.744-3.158,5.535-4.899
    c2.19,7.83,5.211,15.184,7.398,23.054c3.213,11.566,0.371,21.749-4.748,31.05c-2.184-16.284-4.822-32.436-10.292-47.479
    C115.901,249.394,116.603,248.819,117.318,248.257z M43.458,477.843c-7.45,5.122-15.346,9.108-23.552,11.663
    c-0.538-18.763-0.775-37.504,1.672-56.157c4.236-32.305,13.467-64.167,27.16-91.787c6.837-13.788,15.763-25.64,24.693-37.208
    c-4.423,28.55,2.944,71.484,0.809,72.748c-14.493,8.577-14.873,32.166-8.04,49.499c-19.253,3.539-21.181,28.866-23.152,49.549
    C42.976,476.903,43.15,477.467,43.458,477.843z M72.043,450.049c-4.428,5.826-9.223,11.238-14.318,16.124
    c-0.301-11.386,5.778-21.026,12.861-27.02c0.822-0.696,0.976-1.815,0.735-2.763c1.718,2.49,3.618,4.64,5.671,6.312
    c0.08,0.065,0.16,0.107,0.24,0.155C75.543,445.31,73.817,447.715,72.043,450.049z M93.351,413.854
    c-1.866,4.356-3.924,8.579-6.131,12.673c-7.41-7.164-11.348-24.24-5.25-33.882c0.108-0.172,0.189-0.35,0.256-0.531
    c2.928,6.438,6.474,12.508,10.712,18.08c0.514,0.677,1.117,0.82,1.656,0.633C94.19,411.844,93.779,412.856,93.351,413.854z
     M97.557,318.327c-6.505-13.421-1.936-30.772-0.574-46.101c1.898-2.72,3.794-5.445,5.685-8.191c1.068-1.551,2.164-3.03,3.29-4.447
    C111.078,279.519,115.417,312.376,97.557,318.327z M108.084,378.011c-0.728,1.23-1.408,2.499-2.064,3.787
    c-3.123-12.361-6.731-27.81,2.147-37.466c3.432-3.731,7.739-6.248,11.634-9.054c3.775-2.721,7.4-5.7,10.855-9.018
    c0.038,0.045,0.065,0.093,0.107,0.138c5.298,5.59,13.379,13.752,14.596,23.256C134.734,354.693,115.042,366.261,108.084,378.011z
     M153.322,294.802c-1.729,6.713-4.83,12.779-7.254,19.141c-0.891-0.872-1.782-1.741-2.613-2.72
    c-0.241-0.283-0.498-0.455-0.759-0.551c5.104-9.548,7.779-20.844,7.02-32.952C153.862,281.765,155.305,287.096,153.322,294.802z
     M147.662,259.661c-0.589-0.097-1.028,0.133-1.319,0.534c-3.18-9.992-8.198-19.139-13.668-27.19
    c4.992-5.379,10.044-10.484,15.819-14.401c0.279-0.19,0.563-0.369,0.845-0.554c6.275,9.396,13.829,17.48,22.192,23.502
    c-2.71,12.088-3.095,24.878-6.39,36.697C161.773,268.626,156.578,261.116,147.662,259.661z M167.897,335.905
    c-2.386,1.898-4.81,3.609-7.265,5.193c1.151-15.492,9.98-26.366,16.105-39.189c1.104-2.312,2.031-4.666,2.839-7.046
    c3.414,6.887,6.112,14.097,7.611,22.21c0.104,0.565,0.317,0.975,0.591,1.251C181.269,324.898,174.396,330.735,167.897,335.905z
     M202.666,300.57c-0.037-0.229-0.093-0.461-0.193-0.698c-3.595-8.539-6.689-18.282-4.303-27.56
    c2.546,7.058,7.341,11.937,14.143,10.605C209.744,289.214,206.442,295.089,202.666,300.57z M216.719,264.403
    c-4.347-1.17-6.577-4.881-6.655-10.657c-0.005-0.401-0.076-0.746-0.19-1.042c1.422-0.171,2.848-0.405,4.273-0.713
    c0.411-0.088,0.713-0.308,0.929-0.599C216.44,255.497,216.923,259.923,216.719,264.403z M241.773,269.421
    c0.395-6.069,0.7-12.131,0.993-18.178c1.943-1.056,3.799-2.151,5.574-3.315c6.85,0.571,13.609,1.869,19.973,4.991
    c0.661,0.324,1.312,0.67,1.959,1.023C261.575,261.971,251.717,268.074,241.773,269.421z M305.812,253.942
    c0.647-0.352,1.298-0.698,1.959-1.022c6.363-3.123,13.124-4.42,19.975-4.991c1.773,1.164,3.63,2.258,5.572,3.314
    c0.293,6.046,0.598,12.109,0.992,18.178C324.367,268.074,314.51,261.971,305.812,253.942z M359.365,264.403
    c-0.205-4.48,0.279-8.907,1.643-13.011c0.217,0.292,0.518,0.511,0.93,0.599c1.426,0.308,2.852,0.542,4.273,0.713
    c-0.115,0.296-0.186,0.642-0.191,1.042C365.941,259.521,363.711,263.232,359.365,264.403z M373.611,299.872
    c-0.1,0.237-0.156,0.469-0.193,0.698c-3.775-5.481-7.078-11.356-9.646-17.653c6.803,1.332,11.598-3.547,14.143-10.605
    C380.301,281.59,377.207,291.333,373.611,299.872z M408.188,335.905c-6.5-5.17-13.373-11.007-19.883-17.581
    c0.273-0.276,0.486-0.686,0.592-1.251c1.498-8.113,4.197-15.323,7.611-22.21c0.807,2.381,1.734,4.735,2.838,7.046
    c6.125,12.823,14.955,23.697,16.105,39.189C412.996,339.514,410.572,337.803,408.188,335.905z M410.943,278.249
    c-3.295-11.819-3.68-24.609-6.391-36.697c8.363-6.021,15.918-14.105,22.193-23.502c0.281,0.185,0.564,0.363,0.844,0.554
    c5.775,3.917,10.828,9.022,15.82,14.401c-5.471,8.051-10.488,17.198-13.668,27.19c-0.291-0.401-0.73-0.631-1.32-0.534
    C419.506,261.115,414.311,268.625,410.943,278.249z M422.762,294.802c-1.982-7.706-0.539-13.037,3.607-17.083
    c-0.76,12.108,1.914,23.404,7.02,32.952c-0.262,0.096-0.518,0.268-0.76,0.551c-0.83,0.979-1.723,1.849-2.613,2.72
    C427.592,307.581,424.49,301.515,422.762,294.802z M470.064,381.797c-0.656-1.287-1.338-2.557-2.064-3.787
    c-6.957-11.75-26.65-23.317-37.275-28.355c1.217-9.504,9.297-17.666,14.596-23.256c0.041-0.045,0.068-0.093,0.107-0.138
    c3.455,3.317,7.08,6.297,10.855,9.018c3.895,2.806,8.201,5.322,11.633,9.054C476.795,353.988,473.188,369.436,470.064,381.797z
     M470.127,259.588c1.125,1.417,2.221,2.896,3.289,4.447c1.891,2.746,3.787,5.471,5.686,8.191c1.361,15.329,5.93,32.68-0.574,46.101
    C460.666,312.376,465.006,279.519,470.127,259.588z M488.863,426.527c-2.207-4.094-4.264-8.316-6.131-12.674
    c-0.428-0.998-0.838-2.01-1.242-3.027c0.539,0.188,1.143,0.045,1.656-0.633c4.238-5.572,7.783-11.643,10.711-18.08
    c0.066,0.182,0.148,0.359,0.256,0.531C500.211,402.287,496.273,419.363,488.863,426.527z M504.041,450.049
    c-1.773-2.334-3.5-4.74-5.189-7.191c0.08-0.049,0.16-0.09,0.24-0.156c2.053-1.672,3.953-3.82,5.67-6.311
    c-0.24,0.947-0.086,2.066,0.736,2.762c7.082,5.994,13.162,15.635,12.861,27.02C513.264,461.287,508.469,455.875,504.041,450.049z
     M556.178,489.506c-8.205-2.555-16.102-6.541-23.551-11.664c0.307-0.375,0.48-0.939,0.41-1.693
    c-1.973-20.684-3.9-46.01-23.152-49.549c6.832-17.334,6.453-40.922-8.041-49.5c-2.135-1.264,5.232-44.197,0.809-72.747
    c8.932,11.568,17.857,23.421,24.693,37.208c13.693,27.621,22.924,59.482,27.16,91.787
    C556.953,452.002,556.717,470.742,556.178,489.506z"/>
  </svg>

and the code I added to the JS:

var svg4 = new Walkway({
          selector: '#branch',
          duration: 500,
          easing: 'linear'
        });

        svg4.draw(function(){
          console.log('finished branch!');
        });
jzjzjzj commented 10 years ago

It works on your example. Although maybe not as expected. Simply add attributes stroke-width="3" stroke="#ff0000" to the path element to see the animation. You might want to increase duration as well (example).

I would suggest to split the path (example) since walkway uses total length of the path. This way though you need to set fill attributes explicitly (in callback to draw()?).

See my commit history for more info.

ConnorAtherton commented 10 years ago

Great answer @jzjzjzj, thanks for getting here before I did. @donpinkus, here is the sass styles for the demo on my website.

  svg {
    path, line {
      stroke: #fff;
      stroke-width: 2px;
    }

    path {
      fill: transparent;
    }
  }

I think exporting from illustrator and thinking this is a bug may become common enough that I should add some information in the README about it. I'll do it later today.

ConnorAtherton commented 10 years ago

Just to demonstrate http://codepen.io/connoratherton/pen/ByBJxL

jzjzjzj commented 10 years ago

Problem with this splitting approach is we lose transparency on intersections of the compound path. Probably could be partially solved by using masks, but that would be completely different beast of SVG. And automating the splitting (if even possible) imho is out of the walkways scope.

donpinkus commented 10 years ago

Wow, thanks for the quick and thorough response guys!

It looks awesome after splitting the path.

Out of curiosity, how did you know where to split my path? I only have a bit of experience with SVG, mostly from D3. From looking at the path coordinates, I don't see obvious places where it's an inside path.

Also why the stroke-dasharray: 96.0715713500977px, 96.0715713500977px; stroke-dashoffset: 0px; line?

jzjzjzj commented 10 years ago

@donpinkus Where do you see stroke-dasharray: 96.0715713500977px, 96.0715713500977px; stroke-dashoffset: 0px;? You don't have to worry about it, those attributes are added and managed by the script.

Regards splitting - I have (had) no experience with SVG before reading your issue, but it is very suspicious that path of initial three examples starts with M and ends with z while containing neither of them inbetween. Except your example. Had to try splitting between z and M. :) My guess is that there should be a way of making a path to be not compound in Illustrator.

Anyway - more info.

ConnorAtherton commented 10 years ago

Again, thanks @jzjzjzj, the link to the doc is fantastic. I'll close this in the next few hours.