Отзывчивая форма заполнения SVG - PullRequest
Новая
       20

Отзывчивая форма заполнения SVG

0 голосов
/ 01 октября 2018 

#fg {
  fill: url(#ship);
  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);
  }
}
#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;
}
    <div class="background">
        <svg viewBox="0 0 1376 764">
            <defs>
                <clipPath id="ship">
                    <use xlink:href="#shape" id="bg" />
                </clipPath>
                <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>
            <image xlink:href="http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg"
                width="1376" height="764" preserveAspectRatio="xMidYMid slice" clip-path="url(#ship)" />
            <use xlink:href="#shape" id="fg" />
        </svg>
    </div>

Я пытаюсь создать анимацию загрузки страницы, сначала рисуется белая линия, а затем я хочу заполнить экран белой SVG-анимацией, я получилвсе работает, но мне не нравится острый край для эффекта заливки, как я могу изменить форму угла на форму белой линии?пожалуйста, посмотрите анимацию в действии, чтобы лучше понять

1 Ответ

0 голосов
/ 01 октября 2018

Просто используйте исходную форму контура и увеличьте (масштабируйте) ее.

В следующем примере я удалил ненужные элементы, которые вы использовали, и слегка изменил основную форму, чтобы она имела нижний правый угол(вместо того, чтобы просто быть строкой), чтобы я мог ее заполнить.

Я поставил одну копию впереди (id = "fg"), с анимацией тире, как вы просили в предыдущем вопросе.И за этим я помещаю копию пути (id = "bg") с белой заливкой.Затем, когда анимация черты заканчивается, я запускаю вторую анимацию, которая масштабирует белую версию фигуры в 4 раза, чтобы заполнить SVG. 

#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;background:pink;">
    <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>

Обновление

Чтобы фон был заполнен изображением, простейшим подходом, вероятно, является использование пути обрезки. 

#fg {
  fill: pink;
  stroke: #fff;
  stroke-width: 10px;
  stroke-dasharray: 1028px;
  -webkit-animation: dash 2s;
          animation: dash 2s;
}

@keyframes dash {
  from { stroke-dashoffset: 1028px; }
  to   { stroke-dashoffset: 0px; }
}

@-webkit-keyframes dash {
  from { stroke-dashoffset: 1028px; }
  to   { stroke-dashoffset: 0px; }
}


#bg {
  fill: url(#kitten);
  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;background:pink;">
    <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"/>
                <clipPath id="kitten">
                  <use xlink:href="#shape" id="bg"/>
                </clipPath>
            </defs>
            <image xlink:href="https://placekitten.com/700/350" width="1376" height="764" preserveAspectRatio="xMidYMid slice" clip-path="url(#kitten)"/>
            <use xlink:href="#shape" id="fg"/>
        </svg>
    </div>
</div>
...