IE looses strokeWidth when importing svg or has no default

[seiler-steinbach]

When no strokeWidth is specified in the svg file, IE does not draw the path.

svg = new Path();
svg.importSVG(svgUrl, {
            expandShapes: true
        });
path = svg.parent.children[1].children[0];

Its necessary to set an explict strokeWidth in the Code:

path.strokeWith = 1;

Example svg file:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="680px" height="624px" viewBox="0 0 680 624" style="enable-background:new 0 0 680 624;" xml:space="preserve">
<style type="text/css">
<![CDATA[
    .st0{fill:none;stroke:#E8475F;stroke-miterlimit:10;}
]]>
</style>
<path fill="none" stroke="#E9475F" stroke-miterlimit="10" d="M-592.028,148.87c-12,14.249-20.202,28.381-25.183,42.004
        c-4.98,13.623-6.739,26.737-5.851,38.951s4.424,23.526,10.032,33.546s13.288,18.748,22.466,25.791s19.854,12.402,31.452,15.685
        c11.599,3.283,24.12,4.489,36.99,3.228s26.087-4.991,39.079-11.58c12.991-6.589,25.756-16.038,37.719-28.739
        s23.912-22.746,35.709-30.519c11.797-7.772,23.442-13.271,34.8-16.878c11.358-3.606,22.428-5.321,33.074-5.525
        c10.646-0.204,20.868,1.103,30.528,3.539c9.661,2.437,18.761,6.002,27.164,10.315c8.403,4.314,16.108,9.376,22.98,14.804
        c6.872,5.428,12.909,11.224,17.977,17.004c5.068,5.781,9.166,11.546,12.156,16.917s5.841,10.203,8.7,14.494
        c2.858,4.291,5.725,8.04,8.749,11.244c3.023,3.203,6.204,5.861,9.69,7.969c3.486,2.108,7.277,3.666,11.523,4.67
        s8.946,1.455,14.25,1.347c5.303-0.108,11.209-0.774,17.868-2.001c6.658-1.228,14.068-3.018,22.379-5.375
        c8.31-2.356,17.521-5.279,27.781-8.771s19.709-5.843,28.391-7.281s16.595-1.964,23.783-1.81c7.187,0.154,13.649,0.989,19.427,2.273
        c5.778,1.284,10.873,3.018,15.326,4.97s8.265,4.123,11.478,6.28c3.213,2.157,5.827,4.302,7.884,6.203s3.558,3.558,4.544,4.739
        s1.458,1.888,1.458,1.888c5.625,8.875,9.61,17.199,12.237,24.906s3.895,14.798,4.085,21.206c0.19,6.408-0.698,12.134-2.383,17.111
        s-4.167,9.208-7.167,12.624s-6.515,6.018-10.266,7.741s-7.738,2.567-11.68,2.465c-3.942-0.102-7.839-1.148-11.41-3.205
        c-3.571-2.057-6.816-5.125-9.455-9.269s-3.288-9.202-2.356-14.591c0.932-5.389,3.444-11.108,7.128-16.575
        s8.538-10.683,14.155-15.063c5.617-4.381,11.995-7.926,18.725-10.054s13.813-2.838,20.839-1.548
        c7.026,1.291,13.995,4.582,20.497,10.457s12.539,14.333,17.699,25.957c5.161,11.624,9.445,26.415,12.444,44.955
        s7.148,34.839,12.223,49.158c5.074,14.318,11.073,26.657,17.771,37.275c6.698,10.619,14.096,19.517,21.968,26.956
        s16.219,13.418,24.814,18.198s17.44,8.361,26.31,11.002c8.869,2.642,17.762,4.344,26.453,5.368s17.182,1.369,25.246,1.295
        c8.064-0.074,15.702-0.565,22.689-1.215s14.786-2.143,22.923-4.483c8.138-2.341,16.615-5.53,24.959-9.573
        s16.553-8.939,24.156-14.694c7.603-5.755,14.599-12.369,20.515-19.847s10.752-15.82,14.036-25.032s5.013-19.292,4.717-30.249
        s-2.618-22.787-7.439-35.498s-12.142-26.302-22.435-40.778s-17.981-28.412-23.386-41.692s-8.524-25.905-9.681-37.76
        s-0.349-22.94,2.102-33.141c2.45-10.201,6.544-19.518,11.961-27.836c5.417-8.318,12.157-15.638,19.899-21.845
        c7.743-6.207,16.488-11.301,25.916-15.167s19.537-6.506,30.009-7.804s21.305-1.254,32.18,0.246s20.638,3.272,29.4,5.298
        c8.763,2.026,16.525,4.307,23.402,6.824c6.876,2.517,12.865,5.271,18.08,8.244c5.215,2.973,9.655,6.165,13.434,9.559
        s6.896,6.989,9.465,10.768c2.568,3.779,4.588,7.743,6.172,11.872s2.731,8.425,3.556,12.87c0.825,4.445,1.326,9.038,1.616,13.763
        s-0.042,9.094-0.882,13.086c-0.84,3.992-2.188,7.607-3.931,10.824c-1.743,3.216-3.879,6.033-6.296,8.429
        c-2.417,2.396-5.114,4.371-7.977,5.902s-5.892,2.621-8.972,3.244c-3.081,0.624-6.213,0.782-9.283,0.454s-6.078-1.144-8.909-2.468
        c-2.832-1.324-5.486-3.158-7.851-5.522s-4.262-5.011-5.712-7.856c-1.45-2.845-2.452-5.889-3.024-9.047s-0.714-6.433-0.445-9.738
        s0.951-6.642,2.026-9.927s2.543-6.518,4.388-9.616c1.844-3.097,4.063-6.059,6.64-8.802s5.511-5.267,8.785-7.488
        s6.886-4.14,10.819-5.672c3.669-1.43,7.896-3.198,12.43-5.312c4.535-2.113,9.377-4.57,14.277-7.375
        c4.9-2.806,9.857-5.96,14.622-9.468c4.765-3.508,9.337-7.369,13.465-11.587s7.814-8.795,10.807-13.734
        c2.992-4.938,5.291-10.24,6.646-15.908c1.355-5.668,1.766-11.704,0.983-18.11c-0.783-6.407-2.76-13.186-6.182-20.34"/>
</svg>

[iconexperience]

Interesting, on Internet Explorer the stroke width is 0.01 after loading, on all other browsers it is 1 (as expected).

[iconexperience]

I digged a little further and found that IE provides "0.01px" for the calculated stroke width if no stroke width is set. Here is my simple test code:

var elem = document.createElement("foo");
console.log('"' + window.getComputedStyle(elem).getPropertyValue('stroke-width') + '"');

http://sketch.paperjs.org/#S/JY5BCsIwEEWvEmaTFLUHqLgS90LBjXERk7EtTTIlnVqKeHcTXL63eP9/IJqA0EA7Itse9mDJFX6bJNBjECfhyC4BI9c2oWG8ZJtJaXgRaaiOOuloKc7ksfbUKalBip1Yh+horTvkM4VpYXQtbx5VqVZFXxNNmHi7Gb+gkjMnGvGwDo57WeVA6fzr+dYzb48TDZFnaO6P7w8=

Here are the outputs:
InternetExplorer: "0.01px"
Firefox: "1px"
Chrome: ""

I do not have a solution for this issue, but at least I found an explanation for the different behaviour on Internet Explorer.

[lehni]

Intersting indeed… Since we allow the styles of the page to affect the SVG that we're importing, I'm not sure if this is actually a bug or not. It's just that the browsers' different behaviors are allowed to "leak" in because we pull in the styles. I'd say this is a IE bug, not a paper.js bug. But one potential fix could be to set a stroke style on the body tag and see if that propagates through in the absence of any other styling.