SVG之间的图像

Question

 #home { height: 100vh; background-image: url("http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; padding: 0; margin-left: -10px; } .background { overflow: hidden; } #fg { fill: pink; stroke: #fff; stroke-width: 10px; stroke-dasharray: 1024px; -webkit-animation: dash 2s; animation: dash 2s; } @keyframes dash { from { stroke-dashoffset: 1024px; } to { stroke-dashoffset: 0px; } } @-webkit-keyframes dash { from { stroke-dashoffset: 1024px; } to { stroke-dashoffset: 0px; } } #bg { fill: white; stroke: none; transform-origin: 1270px 550px; -webkit-animation: bgfill 2s linear 2s forwards; animation: bgfill 2s linear 2s forwards; } @keyframes bgfill { from { transform: scale(1); } to { transform: scale(4); } } @-webkit-keyframes bgfill { from { transform: scale(1); } to { transform: scale(4); } } 

 <div id="home" class="section" style="height:100vh;"> <div class="background"> <svg viewBox="0 0 1376 764"> <defs> <path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z" /> </defs> <use xlink:href="#shape" id="bg" /> <use xlink:href="#shape" id="fg" /> </svg> </div> </div> 

I can not seem to make the background image visible at all times while remaining the same effect, making the fill transparent gets rid of the animation, I also tried to play around with z-index on various elements but without success, how can I make it so that the background image is visible inside the white line instead of the pink svg?

I also tried applying the same image to the pink SVG as fill and it kind of works, I just can not seem to make the image appear like how it would if it was full screen, it also makes the page a bit slow:

#fg {
  fill: url(#image);
  stroke: #fff;
  stroke-width: 10px;
  stroke-dasharray: 1024px;
  -webkit-animation: dash 2s;
  animation: dash 2s;
}

<pattern id="image" width="1" height="1">
  <image xlink:href="http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg"></image>
</pattern>

Answer 1

You can get rid of the pink with fill-opacity . But you would need to adjust the white "background" as it overlays the background-image.

You might need to change the shape for that.

You could also include the image as a layer in the svg.

 #home { height: 100vh; background-image: url("http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; padding: 0; margin-left: -10px; } .background { overflow: hidden; } #fg { fill: pink; fill-opacity: 0; stroke: #fff; stroke-width: 10px; stroke-dasharray: 1024px; -webkit-animation: dash 2s; animation: dash 2s; } @keyframes dash { from { stroke-dashoffset: 1024px; } to { stroke-dashoffset: 0px; } } @-webkit-keyframes dash { from { stroke-dashoffset: 1024px; } to { stroke-dashoffset: 0px; } } #bg { fill: white; opacity: .5; stroke: none; transform-origin: 1270px 550px; -webkit-animation: bgfill 2s linear 2s forwards; animation: bgfill 2s linear 2s forwards; } @keyframes bgfill { from { transform: scale(1); } to { transform: scale(4); } } @-webkit-keyframes bgfill { from { transform: scale(1); } to { transform: scale(4); } } 

 <div id="home" class="section" style="height:100vh;"> <div class="background"> <svg viewBox="0 0 1376 764"> <defs> <path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z" /> </defs> <use xlink:href="#shape" id="bg" /> <use xlink:href="#shape" id="fg" /> </svg> </div> </div>