Incomplete SVG only in Chrome

Asked

Viewed 95 times

2

I’m doing animations with SVG, using CSS. In Firefox works perfectly with Stroke + Fill gradient, in Edge it just ignores the gradient and in Chromefica everything right, however, it does not "close" 100% the SVG line. I ran the tests on the most recent browsers.

Logo SVG Correto

Logo SVG com Erro

Follow the link in Codepen: https://codepen.io/KamilePimenta/pen/jXeJNP

body {
  height: 100vh;
}

#header {
  display: flex;
  align-items: center;
  height: 100%;
}

#header .logo {
  flex-basis: 100%;
}

#header .logo svg {
  width: 100%;
  height: auto;
}

#header .logo svg {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: #054168;
  stroke-width: 3px;
  stroke-dasharray: 2500;
  stroke-dashoffset: 0;
  -webkit-transition: fill .3s ease;
  -moz-transition: fill .3s ease;
  -o-transition: fill .3s ease;
  transition: fill .3s ease;
  animation: dash 2s linear forwards, stroke .5s linear 1.5s forwards;
}

#header .logo svg .tmw {
  animation: gradient .5s linear 1.5s forwards;
}

#header .logo svg g {
  stroke-width: 2px;
  animation: stroke .5s linear 1.5s forwards;
}

@keyframes gradient {
  0% {
    fill: transparent;
  }
  100% {
    fill: url(#logo-gradient) #054168;
  }
}

@keyframes stroke {
  0% {
    stroke: transparent;
  }
  100% {
    stroke: url(#logo-gradient);
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 2000;
  }
  70% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
<header id="header">
  <div class="logo">
    <svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <defs>
                <linearGradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%" >

                    <stop offset="0%" stop-color="#054168">
                        <animate attributeName="stop-color" values="#054168; #68b5ff; #054168" dur="3s" repeatCount="indefinite"></animate>
                    </stop>

                    <stop offset="100%" stop-color="#68b5ff">
                        <animate attributeName="stop-color" values="#68b5ff; #054168; #68b5ff" dur="3s" repeatCount="indefinite"></animate>
                    </stop>

                </linearGradient>
            </defs>
            <path class="tmw" d="M17.1 205.2h313.8v85.9c0 .3.1 5.5 3.6 7.4 1.4.8 3.1.8 3.8.8.9 0 2.9 0 4.6-1 3.3-2.1 3.2-6.9 3.1-7.2v-86h50.7v85.6c0 .3-.4 5 2.9 7.4 1.9 1.4 4.1 1.4 4.9 1.4.9 0 2.9 0 4.7-1.3 3.3-2.4 2.7-7.2 2.7-7.4v-85.6h50.9v86.9c-.1 6.2-1.4 15.6-8.1 22.3-8.5 8.5-21.3 8.3-26.4 8.2-24.5-.4-88.2.1-174.2 0v-85.8c0-.5-.2-3.8-2.9-5.9-1.9-1.4-4-1.4-4.8-1.4-.7 0-2.9 0-4.7 1.5-2.9 2.4-2.5 6.5-2.4 6.8 0 28.3.1 56.5.1 84.8h-48.8c0-28.5.1-56.9.1-85.4 0-.4.4-4.6-2.7-7.1-2-1.6-4.3-1.5-5.1-1.5-.8 0-3.1.1-5 1.7-2.9 2.4-2.6 6.3-2.5 6.7.1 28.5.3 57.1.4 85.6h-50.5c0-33.9 0-67.7-.1-101.6-8.3 0-16.6.1-24.9.1v101.6H48V221H17.1v-15.8z" stroke-miterlimit="10"/>
            <g>
                <path class="tmw" d="M17.1 205.2h313.8v85.9c0 .3.1 5.5 3.6 7.4 1.4.8 3.1.8 3.8.8.9 0 2.9 0 4.6-1 3.3-2.1 3.2-6.9 3.1-7.2v-86h50.7v85.6c0 .3-.4 5 2.9 7.4 1.9 1.4 4.1 1.4 4.9 1.4.9 0 2.9 0 4.7-1.3 3.3-2.4 2.7-7.2 2.7-7.4v-85.6h50.9V292c0 3.4-.4 8.6-2.9 14.3-1.3 2.9-2.6 6.1-5.8 9-3.7 3.4-7.8 4.3-13.9 5.7-2.9.7-7 1.4-11.9 1.5H254.1v-85.8c0-.5-.2-3.8-2.9-5.9-1.9-1.4-4-1.4-4.8-1.4-.7 0-2.9 0-4.7 1.5-2.9 2.4-2.5 6.5-2.4 6.8 0 28.3.1 56.5.1 84.8h-48.8c0-28.5.1-56.9.1-85.4 0-.4.4-4.6-2.7-7.1-2-1.6-4.3-1.5-5.1-1.5-1 0-3.2.1-5 1.7-2.8 2.4-2.2 6.4-2.1 6.7v85.6h-50.5c0-33.9 0-67.7-.1-101.6-8.3 0-16.6.1-24.9.1v101.6H48V221H17.1v-15.8z" stroke-miterlimit="10"/>
                <circle class="st4" cx="489.9" cy="214.7" r="10.8"/>
                <path class="st4" d="M486.1 220.7v-11.3h5c1.6 0 2.9 1.2 3 2.5.1 1.5-1.3 3-3.1 2.9h-4.8 4c1.6 2 3.1 3.9 4.7 5.9"/>
            </g>
        </svg>
  </div>
</header>

Any idea how to fix?

html css image animation svg

  • No code to test.... Put SVG there. And put HTML/CSS there too!

  • Please follow the link: https://codepen.io/KamilePimenta/pen/jXeJNP

1 answer

2


Your problem is with your path, he’s starting at the "wrong place"...

I can’t tell you why a browser rendered one way and another browser another way. But I’ll give you a solution to fix this. Got 100% in Chrome and Firefox

What I suggest you do is fine-tune where your path, notice that here I have two equal SVG, however the stroke gets aligned right on the X/Y of the vertex, while on the second SVG I "adjusted" to the path start 30% "forward" of vertex...

inserir a descrição da imagem aqui

Code of the image above.

path {
    stroke: green;
    stroke-width: 2;
}
svg {
    fill: bisque;
}
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
    <!-- Points -->
    <circle cx="10" cy="10" r="2" fill="red"/>
    <circle cx="90" cy="90" r="2" fill="red"/>
    <circle cx="90" cy="10" r="2" fill="red"/>
    <circle cx="10" cy="90" r="2" fill="red"/>
</svg>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <path class="dm" d="M30 10 H 90 V 90 H 10 L 10 10"/>
    <!-- Points -->
    <circle cx="10" cy="10" r="2" fill="red"/>
    <circle cx="90" cy="90" r="2" fill="red"/>
    <circle cx="90" cy="10" r="2" fill="red"/>
    <circle cx="10" cy="90" r="2" fill="red"/>
</svg>

You can read more here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Now let’s go to your code

This adjustment is related to your stroke-width. Notice that you have two paths one with 3px of stroke-width and another with 2px stroke-width So you need to add to the first m 1.5px and the second 1px

See the image to better understand. Here I increased the border a lot to be more evident. And I put a border 1px red on top to help visualize.

inserir a descrição da imagem aqui

Seen the example above and I suggest you make a fine-tuning of "Move to" to store where the path initiates. The path is defined by d and the first attribute m is the "move to" where the line starts. Just there you change the coordinate of m17.1 for m17.25 and m17.15 so your line will start and end in the expected place.

See your code code.

body {
    height: 100vh;
}

#header {
    display: flex;
    align-items: center;
    height: 100%;
}
#header .logo {
    flex-basis: 100%;
}
#header .logo svg {
    width: 100%;
    height: auto;
}

#header .logo svg {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: #054168;
    stroke-width: 3px;
    stroke-dasharray: 2500;
    stroke-dashoffset: 0;
    -webkit-transition: fill .3s ease;
    -moz-transition: fill .3s ease;
    -o-transition: fill .3s ease;
    transition: fill .3s ease;
    animation: dash 2s linear forwards, stroke .5s linear 1.5s forwards;
}
#header .logo svg .tmw {
    animation: gradient .5s linear 1.5s forwards;
}

#header .logo svg g {
    stroke-width: 2px;
    animation: stroke .5s linear 1.5s forwards;
}

@keyframes gradient {
    0% {
        fill: transparent;
    }
    100% {
        fill: url(#logo-gradient) #054168;
    }
}
@keyframes stroke {
    0% {
        stroke: transparent;
    }
    100% {
        stroke: url(#logo-gradient);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 2000;
    }
    70% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
<header id="header">
    <div class="logo">
        <svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <defs>
                <linearGradient id="logo-gradient" x1="50%" y1="0%" x2="50%" y2="100%" >

                    <stop offset="0%" stop-color="#054168">
                        <animate attributeName="stop-color" values="#054168; #68b5ff; #054168" dur="3s" repeatCount="indefinite"></animate>
                    </stop>

                    <stop offset="100%" stop-color="#68b5ff">
                        <animate attributeName="stop-color" values="#68b5ff; #054168; #68b5ff" dur="3s" repeatCount="indefinite"></animate>
                    </stop>

                </linearGradient>
            </defs>
            <path class="tmw" d="M17.25 205.2h313.8v85.9c0 .3.1 5.5 3.6 7.4 1.4.8 3.1.8 3.8.8.9 0 2.9 0 4.6-1 3.3-2.1 3.2-6.9 3.1-7.2v-86h50.7v85.6c0 .3-.4 5 2.9 7.4 1.9 1.4 4.1 1.4 4.9 1.4.9 0 2.9 0 4.7-1.3 3.3-2.4 2.7-7.2 2.7-7.4v-85.6h50.9v86.9c-.1 6.2-1.4 15.6-8.1 22.3-8.5 8.5-21.3 8.3-26.4 8.2-24.5-.4-88.2.1-174.2 0v-85.8c0-.5-.2-3.8-2.9-5.9-1.9-1.4-4-1.4-4.8-1.4-.7 0-2.9 0-4.7 1.5-2.9 2.4-2.5 6.5-2.4 6.8 0 28.3.1 56.5.1 84.8h-48.8c0-28.5.1-56.9.1-85.4 0-.4.4-4.6-2.7-7.1-2-1.6-4.3-1.5-5.1-1.5-.8 0-3.1.1-5 1.7-2.9 2.4-2.6 6.3-2.5 6.7.1 28.5.3 57.1.4 85.6h-50.5c0-33.9 0-67.7-.1-101.6-8.3 0-16.6.1-24.9.1v101.6H48V221H17.1v-15.8z" stroke-miterlimit="10"/>
            <g>
                <path class="tmw" d="M17.15 205.2h313.8v85.9c0 .3.1 5.5 3.6 7.4 1.4.8 3.1.8 3.8.8.9 0 2.9 0 4.6-1 3.3-2.1 3.2-6.9 3.1-7.2v-86h50.7v85.6c0 .3-.4 5 2.9 7.4 1.9 1.4 4.1 1.4 4.9 1.4.9 0 2.9 0 4.7-1.3 3.3-2.4 2.7-7.2 2.7-7.4v-85.6h50.9V292c0 3.4-.4 8.6-2.9 14.3-1.3 2.9-2.6 6.1-5.8 9-3.7 3.4-7.8 4.3-13.9 5.7-2.9.7-7 1.4-11.9 1.5H254.1v-85.8c0-.5-.2-3.8-2.9-5.9-1.9-1.4-4-1.4-4.8-1.4-.7 0-2.9 0-4.7 1.5-2.9 2.4-2.5 6.5-2.4 6.8 0 28.3.1 56.5.1 84.8h-48.8c0-28.5.1-56.9.1-85.4 0-.4.4-4.6-2.7-7.1-2-1.6-4.3-1.5-5.1-1.5-1 0-3.2.1-5 1.7-2.8 2.4-2.2 6.4-2.1 6.7v85.6h-50.5c0-33.9 0-67.7-.1-101.6-8.3 0-16.6.1-24.9.1v101.6H48V221H17.1v-15.8z" stroke-miterlimit="10"/>
                <circle class="st4" cx="489.9" cy="214.7" r="10.8"/>
                <path class="st4" d="M486.1 220.7v-11.3h5c1.6 0 2.9 1.2 3 2.5.1 1.5-1.3 3-3.1 2.9h-4.8 4c1.6 2 3.1 3.9 4.7 5.9"/>
            </g>
        </svg>
    </div>
</header>

  • Very good, solved my problem! But this rendering error you believe occurred in creating this SVG (Illustrator) or from handling CSS with Stroke-width?

  • . I believe to be a feature of rendering the engine of the browsers Webkit, in Safari it is likely that of the same "problem" but only testing to see... I can’t tell you for sure

  • 1

    I understand, I’ll do new tests, finally thank you very much! :)

Browser other questions tagged html css image animation svg

You are not signed in. Login or sign up in order to post.