Not drawing out an SVG path
donpinkus opened this issue · comments
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!');
});
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.
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.
Just to demonstrate http://codepen.io/connoratherton/pen/ByBJxL
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.
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?
@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.
Again, thanks @jzjzjzj, the link to the doc is fantastic. I'll close this in the next few hours.