mask SVG path by another path

I have SVG path (solid) which I want to mask by other path (dashed). I have this CSS

        .dashed{

          stroke-dasharray: 5;



        }

        .path {

          stroke-dasharray: 852;

          stroke-dashoffset: 852;

          animation: dash 4s 1s linear forwards;

        }

        @keyframes dash {

          to { 

            stroke-dashoffset: 0; 

          } 

        }

and the SVG like this

<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="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">

    <g transform="scale(1.7)">

        <path class="path" fill="none" stroke="#e31f1a" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.0" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </g>



    <g transform="scale(1.71)">

        <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </g>    

</svg>

The paths are the same. The reason why I don't use just dashed one is the animation (see CSS part) where I want to do effect which will draw the dashed line.

Using mask image (with the dashed line inside)

 mask-image: url(mask.svg);

did not work for me. Would you know the way?

asked Nov 13 '18 at 10:26

koubin

1144619

add a comment |

I have SVG path (solid) which I want to mask by other path (dashed). I have this CSS

        .dashed{

          stroke-dasharray: 5;



        }

        .path {

          stroke-dasharray: 852;

          stroke-dashoffset: 852;

          animation: dash 4s 1s linear forwards;

        }

        @keyframes dash {

          to { 

            stroke-dashoffset: 0; 

          } 

        }

and the SVG like this

<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="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">

    <g transform="scale(1.7)">

        <path class="path" fill="none" stroke="#e31f1a" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.0" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </g>



    <g transform="scale(1.71)">

        <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </g>    

</svg>

The paths are the same. The reason why I don't use just dashed one is the animation (see CSS part) where I want to do effect which will draw the dashed line.

Using mask image (with the dashed line inside)

 mask-image: url(mask.svg);

did not work for me. Would you know the way?

asked Nov 13 '18 at 10:26

koubin

1144619

add a comment |

I have SVG path (solid) which I want to mask by other path (dashed). I have this CSS

        .dashed{

          stroke-dasharray: 5;



        }

        .path {

          stroke-dasharray: 852;

          stroke-dashoffset: 852;

          animation: dash 4s 1s linear forwards;

        }

        @keyframes dash {

          to { 

            stroke-dashoffset: 0; 

          } 

        }

and the SVG like this

<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="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">

    <g transform="scale(1.7)">

        <path class="path" fill="none" stroke="#e31f1a" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.0" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </g>



    <g transform="scale(1.71)">

        <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </g>    

</svg>

The paths are the same. The reason why I don't use just dashed one is the animation (see CSS part) where I want to do effect which will draw the dashed line.

Using mask image (with the dashed line inside)

 mask-image: url(mask.svg);

did not work for me. Would you know the way?

asked Nov 13 '18 at 10:26

koubin

1144619

I have SVG path (solid) which I want to mask by other path (dashed). I have this CSS

        .dashed{

          stroke-dasharray: 5;



        }

        .path {

          stroke-dasharray: 852;

          stroke-dashoffset: 852;

          animation: dash 4s 1s linear forwards;

        }

        @keyframes dash {

          to { 

            stroke-dashoffset: 0; 

          } 

        }

and the SVG like this

<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="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">

    <g transform="scale(1.7)">

        <path class="path" fill="none" stroke="#e31f1a" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.0" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </g>



    <g transform="scale(1.71)">

        <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </g>    

</svg>

The paths are the same. The reason why I don't use just dashed one is the animation (see CSS part) where I want to do effect which will draw the dashed line.

Using mask image (with the dashed line inside)

 mask-image: url(mask.svg);

did not work for me. Would you know the way?

animation svg mask

asked Nov 13 '18 at 10:26

koubin

1144619

asked Nov 13 '18 at 10:26

koubin

1144619

asked Nov 13 '18 at 10:26

koubin

1144619

asked Nov 13 '18 at 10:26

koubin

1144619

asked Nov 13 '18 at 10:26

koubin

1144619

add a comment |

1 Answer
1

active

oldest

votes

You don't need to use mask-image. That is for when you want to mask an HTML element with a mask.

You should just use an SVG <mask> element. And animate the path in that.

.dashed {

  stroke-dasharray: 5;

}



.path {

  stroke-dasharray: 226;

  stroke-dashoffset: 226;

  animation: dash 4s 1s linear forwards;

}



@keyframes dash {

  to { 

    stroke-dashoffset: 0; 

  } 

}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="612px" height="792px" viewBox="0 0 612 792">

  <defs>

    <mask id="mymask">

      <path class="path" fill="none" stroke="#fff" stroke-width="2"

            d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </mask>

  </defs>



  <g transform="scale(1.71)">

    <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"

          mask="url(#mymask)"

          d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

  </g>    

</svg>

answered Nov 13 '18 at 12:13

Paul LeBeau

55k56493

Great, thanks, saved my day :-)
– koubin
Nov 13 '18 at 14:03

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278895%2fmask-svg-path-by-another-path%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You don't need to use mask-image. That is for when you want to mask an HTML element with a mask.

You should just use an SVG <mask> element. And animate the path in that.

.dashed {

  stroke-dasharray: 5;

}



.path {

  stroke-dasharray: 226;

  stroke-dashoffset: 226;

  animation: dash 4s 1s linear forwards;

}



@keyframes dash {

  to { 

    stroke-dashoffset: 0; 

  } 

}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="612px" height="792px" viewBox="0 0 612 792">

  <defs>

    <mask id="mymask">

      <path class="path" fill="none" stroke="#fff" stroke-width="2"

            d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </mask>

  </defs>



  <g transform="scale(1.71)">

    <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"

          mask="url(#mymask)"

          d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

  </g>    

</svg>

answered Nov 13 '18 at 12:13

Paul LeBeau

55k56493

Great, thanks, saved my day :-)
– koubin
Nov 13 '18 at 14:03

add a comment |

You don't need to use mask-image. That is for when you want to mask an HTML element with a mask.

You should just use an SVG <mask> element. And animate the path in that.

.dashed {

  stroke-dasharray: 5;

}



.path {

  stroke-dasharray: 226;

  stroke-dashoffset: 226;

  animation: dash 4s 1s linear forwards;

}



@keyframes dash {

  to { 

    stroke-dashoffset: 0; 

  } 

}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="612px" height="792px" viewBox="0 0 612 792">

  <defs>

    <mask id="mymask">

      <path class="path" fill="none" stroke="#fff" stroke-width="2"

            d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </mask>

  </defs>



  <g transform="scale(1.71)">

    <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"

          mask="url(#mymask)"

          d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

  </g>    

</svg>

answered Nov 13 '18 at 12:13

Paul LeBeau

55k56493

Great, thanks, saved my day :-)
– koubin
Nov 13 '18 at 14:03

add a comment |

You don't need to use mask-image. That is for when you want to mask an HTML element with a mask.

You should just use an SVG <mask> element. And animate the path in that.

.dashed {

  stroke-dasharray: 5;

}



.path {

  stroke-dasharray: 226;

  stroke-dashoffset: 226;

  animation: dash 4s 1s linear forwards;

}



@keyframes dash {

  to { 

    stroke-dashoffset: 0; 

  } 

}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="612px" height="792px" viewBox="0 0 612 792">

  <defs>

    <mask id="mymask">

      <path class="path" fill="none" stroke="#fff" stroke-width="2"

            d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </mask>

  </defs>



  <g transform="scale(1.71)">

    <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"

          mask="url(#mymask)"

          d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

  </g>    

</svg>

answered Nov 13 '18 at 12:13

Paul LeBeau

55k56493

You don't need to use mask-image. That is for when you want to mask an HTML element with a mask.

You should just use an SVG <mask> element. And animate the path in that.

.dashed {

  stroke-dasharray: 5;

}



.path {

  stroke-dasharray: 226;

  stroke-dashoffset: 226;

  animation: dash 4s 1s linear forwards;

}



@keyframes dash {

  to { 

    stroke-dashoffset: 0; 

  } 

}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="612px" height="792px" viewBox="0 0 612 792">

  <defs>

    <mask id="mymask">

      <path class="path" fill="none" stroke="#fff" stroke-width="2"

            d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </mask>

  </defs>



  <g transform="scale(1.71)">

    <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"

          mask="url(#mymask)"

          d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

  </g>    

</svg>

.dashed {

  stroke-dasharray: 5;

}



.path {

  stroke-dasharray: 226;

  stroke-dashoffset: 226;

  animation: dash 4s 1s linear forwards;

}



@keyframes dash {

  to { 

    stroke-dashoffset: 0; 

  } 

}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="612px" height="792px" viewBox="0 0 612 792">

  <defs>

    <mask id="mymask">

      <path class="path" fill="none" stroke="#fff" stroke-width="2"

            d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </mask>

  </defs>



  <g transform="scale(1.71)">

    <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"

          mask="url(#mymask)"

          d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

  </g>    

</svg>

.dashed {

  stroke-dasharray: 5;

}



.path {

  stroke-dasharray: 226;

  stroke-dashoffset: 226;

  animation: dash 4s 1s linear forwards;

}



@keyframes dash {

  to { 

    stroke-dashoffset: 0; 

  } 

}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="612px" height="792px" viewBox="0 0 612 792">

  <defs>

    <mask id="mymask">

      <path class="path" fill="none" stroke="#fff" stroke-width="2"

            d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

    </mask>

  </defs>



  <g transform="scale(1.71)">

    <path class="dashed" fill="none" stroke="black" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"

          mask="url(#mymask)"

          d="m 34.161514,227.15068 c 0,0 5.335031,41.13009 -10.338686,53.31427 -13.8827124,10.79193 -26.8802222,-16.84233 0.681739,-19.39738 52.917804,-4.90561 69.13065,91.87642 69.13065,91.87642"/>

  </g>    

</svg>

answered Nov 13 '18 at 12:13

Paul LeBeau

55k56493

answered Nov 13 '18 at 12:13

Paul LeBeau

55k56493

answered Nov 13 '18 at 12:13

Paul LeBeau

55k56493

answered Nov 13 '18 at 12:13

Paul LeBeau

55k56493

Great, thanks, saved my day :-)
– koubin
Nov 13 '18 at 14:03

add a comment |

Great, thanks, saved my day :-)
– koubin
Nov 13 '18 at 14:03

Great, thanks, saved my day :-)
– koubin
Nov 13 '18 at 14:03

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky