Ведущий: Арен, есть очень важное задание, которое тебе нужно выполнить.
Арен: Какая задача так важна?
Ведущий: Недавно мы открыли новый парк и наняли писателя, чтобы он написал мягкую статью, чтобы раскрутить его.«Облака и луны приходят к цветам и теням — реализация комбинаций нескольких технологий SVG», К сожалению, помимо того, что он красив, этот писатель совсем не хорош, и у него совсем нет объема чтения, поэтому я решил отправить вас под прикрытием в этот парк, чтобы выяснить это.
Арен: С этим парком какие-то проблемы, там есть банды, или иностранные силы с базами?
Лидерство: важнее, чем это. Основная причина в том, что популярность парка слишком плоха. Я надеюсь, что вы можете притворяться туристом и помочь вам понять мысли других туристов. Кроме того, вы можете говорить о преимуществах нашего парка, поощрять туристов принять участие и активируйте атмосферу.
Арен: Лидер, эта работа на самом деле не называется под прикрытием, у нее более привычное название.
Ведущий: Да, как тебя зовут?
Арен: Онлайн называется Шуй Джун, офлайн называется Туэр...
Ведущий: Вы не хотите идти?
Арен: Лидер, я закончила компьютерный факультет, занимаясь этим...
Ведущий: Пожалуйста, используйте десять причин, чтобы убедить всех программистов в том, что PHP — лучший язык в мире.
Арена: Лидер, как называется ваш парк?
Руководство: называется SVG Park.
1. Неоновые огни Октоберфеста
Немного переодевшись (в основном заменив клетчатую рубашку и надев сумку через плечо), Арен пришел в парк SVG. Случайно, с первого взгляда, я увидел неоновую вывеску в парке, где проходит Октоберфест.
Код неоновой вывески Октоберфест выглядит так
<style>
body {
background: #1d2b29;
width: 100vw;
height: 100vh;
margin: 0;
overflow: hidden;
}
.svg-beerglass {
animation: flicker 4.1s infinite;
}
@keyframes flicker {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<svg width="2000px" height="670px">
<defs>
<filter id="beerbottleblur" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<svg id="beerbottle" t="1565578109000" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="7275" width="128" height="128">
<path stroke="#29ABE2" stroke-width="25"
d="M571.907998 79.770028H452.090002c-10.226 0-17.731999-9.612-15.25-19.532l5.874-23.499999a27.725999 27.725999 0 0 1 26.897999-21.001999h84.771998c12.724 0 23.813999 8.66 26.897999 21.001999l5.874 23.499999c2.482 9.92-5.022 19.531999-15.248 19.532z"
fill="none" p-id="7276"></path>
<path stroke="#009D00" stroke-width="25"
d="M591.767998 1008.268h-159.539996c-35.515999 0-64.308998-28.789999-64.308998-64.307998V530.552014a521.779985 521.779985 0 0 1 48.024999-218.658993l0.002-0.002A521.769985 521.769985 0 0 0 463.970001 93.234027V79.768028h96.049998v13.463999a521.797985 521.797985 0 0 0 48.025998 218.660994 521.783985 521.783985 0 0 1 48.026999 218.660993v413.407988c0.002 35.515999-28.788999 64.305998-64.304998 64.305998z"
fill="none" p-id="7277"></path>
<path stroke="#00CA65" stroke-width="25"
d="M607.025997 311.893021c-31.639999-68.551998-47.207999-143.155996-47.207998-218.659994V80.607028H511.56v12.623999c0 75.504998 16.618 150.108996 48.257999 218.660994 31.639999 68.551998 48.257999 143.156996 48.257998 218.660993V943.960002c0 35.515999-28.815999 64.031998-64.333998 64.031998h48.025999c35.515999 0 62.466998-28.515999 62.466998-64.031998V530.554014c0-75.501998-15.569-150.106996-47.208999-218.659993z"
fill="none" p-id="7278"></path>
<path stroke="#008442" stroke-width="25"
d="M416.094003 311.893021c31.639999-68.551998 47.207999-143.155996 47.207998-218.659994V80.607028h48.257999v12.623999c0 75.504998-15.568 150.108996-47.207999 218.660994s-47.207999 143.156996-47.207998 218.660993V943.960002c0 35.515999 27.591999 64.031998 63.109998 64.031998h-48.025999c-35.515999 0-63.339998-28.515999-63.339998-64.031998V530.554014c-0.003-75.501998 15.566-150.106996 47.205999-218.659993z"
fill="none" p-id="7279"></path>
<path stroke="#29ABE2" stroke-width="25"
d="M592.039998 271.871022H431.954002l16.01-80.041998h128.067996zM367.927004 832.167006h288.159992v48.025998h-288.159992z"
fill="none" p-id="7280"></path>
<path stroke="#FFFFFF" stroke-width="25" d="M367.927004 608.064012h288.159992V832.190006h-288.159992z"
fill="none" p-id="7281"></path>
<path stroke="#C7B299" stroke-width="25"
d="M431.964002 608.064012a80.043998 80.043998 0 1 0 160.087996 0 80.043998 80.043998 0 1 0-160.087996 0z"
fill="none" p-id="7282"></path>
<path stroke="#29ABE2" stroke-width="25"
d="M367.927004 560.038014h64.034998v48.025998h-64.034998z m224.124994 0h64.034998v48.025998h-64.034998zM479.990001 608.064012a32.017999 32.017999 0 1 0 64.035998 0 32.017999 32.017999 0 1 0-64.035998 0z"
fill="none" p-id="7283"></path>
<path stroke="#29ABE2" stroke-width="25"
d="M511.998 655.807011c-26.331999 0-47.753999-21.422999-47.753999-47.754999s21.421999-47.753999 47.753999-47.753998 47.753999 21.421999 47.753999 47.753998-21.423999 47.754999-47.753999 47.754999z m0-64.034998c-8.978 0-16.282 7.304-16.282 16.281999s7.304 16.282 16.282 16.282 16.282-7.304 16.282-16.282-7.306-16.282-16.282-16.281999zM417.150003 768.805007h190.929994v31.472H417.150003z m29.373999-48.257998h130.083996v31.471999H446.524002z"
fill="none" p-id="7284"></path>
<path stroke="#C7B299" stroke-width="25"
d="M479.990001 271.880022a32.017999 32.017999 0 1 0 64.035998 0 32.017999 32.017999 0 1 0-64.035998 0z"
fill="none" p-id="7285"></path>
<path stroke="white" stroke-width="10"
d="M622.335997 305.301021c-30.187999-65.411998-46.251999-137.993996-46.547999-210.042994A31.217999 31.217999 0 0 0 596.699998 83.410028a31.269999 31.269999 0 0 0 5.723999-26.988l-5.873999-23.499999A43.399999 43.399999 0 0 0 554.383999 0.00003h-84.771998a43.397999 43.397999 0 0 0-42.163999 32.919999l-5.873999 23.499999a31.255999 31.255999 0 0 0 5.723999 26.988 31.213999 31.213999 0 0 0 20.914 11.847999c-0.296 72.049998-16.362 144.636996-46.549999 210.042994-32.366999 70.125998-49.474999 148.018996-49.474998 225.250993v413.407988c0 44.135999 35.908999 80.041998 80.042997 80.041998h159.539996c44.135999 0 80.042998-35.905999 80.042997-80.041998V530.554014c-0.002-77.235998-17.109999-155.128995-49.476998-225.252993z m-65.017998-48.447999c-6.312-18.991999-24.235999-32.735999-45.319999-32.735999s-39.007999 13.74-45.319999 32.735999h-12.585999a543.389984 543.389984 0 0 0 12.987999-48.257998h89.837998a543.759984 543.759984 0 0 0 12.987999 48.257998h-12.587999z m-29.039999 15.018c0 8.976-7.304 16.282-16.282 16.282s-16.282-7.304-16.282-16.282 7.304-16.282 16.282-16.281999c8.978 0.002 16.282 7.308 16.282 16.281999z m16.015999-176.362995c0.12 27.259999 2.404 54.586998 6.698 81.616998h-77.985998c4.292-27.031999 6.58-54.356998 6.7-81.616998h64.587998z m-74.681998-64.035998h84.771998a11.974 11.974 0 0 1 11.633999 9.082l5.93 23.475999-0.038 0.002h-119.799996l5.87-23.477999a11.972 11.972 0 0 1 11.631999-9.082z m-39.377999 287.014992c4.57-9.902 8.8-19.973999 12.756-30.159999h24.175999c6.718 18.249999 24.279999 31.299999 44.829999 31.299999 20.551999 0 38.111999-13.05 44.829999-31.299999H580.999998a529.687984 529.687984 0 0 0 12.756 30.161999c30.471999 66.019998 46.575999 139.352996 46.575998 212.066993V544.300014h-56.943998c-17.549999-19.635999-43.049999-32.025999-71.397998-32.025999s-53.845998 12.39-71.397998 32.025999h-56.943998v-13.748c0.01-72.709998 16.116-146.041996 46.585998-212.064993zM383.658004 817.060006V624.030012h33.919999c7.63 45.232999 47.051999 79.802998 94.419997 79.802997s86.789997-34.573999 94.419997-79.802997h33.919999v193.029994h-256.679992z m256.679992 31.471999v14.688h-256.679992v-14.688h256.679992zM417.490003 592.556013h-33.833999V575.770013h38.173999a95.157997 95.157997 0 0 0-4.34 16.786z m30.199999 15.497999c0-35.457999 28.847999-64.305998 64.305998-64.305998s64.305998 28.847999 64.305998 64.305998-28.847999 64.306998-64.305998 64.306998-64.305998-28.847999-64.305998-64.306998z m158.813995-15.497999a94.769997 94.769997 0 0 0-4.342-16.786h38.173999v16.786h-33.831999z m-14.735999 399.975988h-159.539996c-26.781999 0-48.569999-21.789999-48.569998-48.569999v-49.268998h256.679992v49.268998c0 26.779999-21.789999 48.569999-48.569998 48.569999z"
fill="none" p-id="7286"></path>
</svg>
<svg id="beerglass" t="1565581315581" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="8508" width="70" height="70">
<path
d="M804.352 406.016l-82.432 0-48.64 0 0 473.6-97.792 0L575.488 408.064c-17.408 11.776-14.848 19.968-36.864 23.552l0 447.488L435.2 879.104 435.2 430.08c-19.968-4.608-20.992-12.8-36.864-24.064l0 473.6L294.4 879.616 294.4 406.016 250.88 406.016l0 445.952c0 45.568 36.864 82.432 82.432 82.432l304.128 0c45.568 0 86.528-36.864 86.528-82.432l0-64 80.384 0c36.352 0 66.048-29.696 66.048-66.048L870.4 472.064C870.4 435.712 841.216 406.016 804.352 406.016zM825.856 742.912l-101.888 0L723.968 450.048l101.888 0L825.856 742.912z"
p-id="8509" fill="#60B9EE"></path>
<path class="svg-beerglass"
d="M485.376 403.456c-39.424 0-75.776-16.384-102.4-45.056-19.968 14.336-43.52 22.016-68.096 22.016-53.248 0-99.84-36.352-112.64-87.552-16.896-12.8-26.624-32.768-26.624-54.272 0-37.888 30.72-69.12 69.12-69.12 1.024 0 2.048 0 3.072 0 16.896-12.288 36.352-19.456 56.32-21.504 14.848-32.768 47.616-54.784 83.968-54.784 27.136 0 52.736 11.776 70.144 32.256 18.944-4.096 36.352-4.096 55.808 0.512 17.408-20.48 43.008-32.768 70.656-32.768 35.328 0 67.584 20.48 82.944 52.224 60.928 4.096 109.056 54.272 109.056 116.224 0 64-52.224 116.224-116.224 116.224-25.088 0-49.152-8.192-69.12-23.04C564.224 385.536 525.824 403.456 485.376 403.456zM386.56 319.488l8.704 11.776c22.016 28.672 54.784 45.056 90.112 45.056 36.352 0 71.168-17.92 92.672-48.128l9.216-12.8 11.264 10.752c16.896 16.384 38.912 25.088 61.952 25.088 49.152 0 89.6-39.936 89.6-89.6 0-49.152-39.936-89.088-89.088-89.6-0.512 0-1.024 0-2.048 0l-9.728 0-3.072-9.216c-9.728-25.6-34.304-43.008-61.44-43.008-21.504 0-41.984 10.752-54.272 28.672l-5.632 7.68-9.216-2.56c-21.504-6.144-38.4-6.144-59.392-0.512l-9.216 2.56L441.856 148.48c-12.288-17.408-32.256-28.16-53.76-28.16-28.16 0-52.736 17.92-61.952 45.056L323.072 174.08l-9.216 0c-19.456 0.512-37.888 7.168-53.76 19.968l-4.608 3.584-7.68-1.024c-1.024 0-2.048-0.512-3.072-0.512-23.04 0-41.984 18.944-41.984 41.984 0 14.336 7.168 27.136 18.944 35.328l4.608 3.072 1.024 5.632C236.032 323.584 272.896 353.28 314.88 353.28c22.528 0 44.032-8.704 60.416-24.064L386.56 319.488z"
p-id="8510" fill="#60B9EE"></path>
<path
style="fill:#60b9ee;fill-opacity:1;stroke:#60b9ee;stroke-width:38.5823288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 250.87999,406.01599 h 470.1288" id="path1387" inkscape:connector-curvature="0" />
</svg>
<g id="beerbottleneon">
<use xlink:href="#beerbottle" filter="url(#beerbottleblur)" />
<use xlink:href="#beerbottle" opacity="0.9" />
</g>
<g id="beerbottleneon1">
<use xlink:href="#beerbottleneon">
<animateTransform attributeName="transform" id="f1" attributeType='XML' begin='0s;t1.end' dur='2s'
type="rotate" from="0 0 0" to="0 0 0" />
<animateTransform attributeName="transform" id="s1" attributeType='XML' begin='f1.end' dur='0.1s'
type="rotate" from="0 64 64" to="70 64 64" />
<animateTransform attributeName="transform" id="t1" attributeType='XML' begin='s1.end' dur='2s'
type="rotate" from="70 64 64" to="70 64 64" />
</use>
</g>
<g id="beerglassneon">
<use xlink:href="#beerglass" filter="url(#beerbottleblur)" />
<use xlink:href="#beerglass" opacity="0.5" />
</g>
<path id="beerpath" d="M -20.501285,20 A 97.750643,50 0 0 0 175,20" />
<text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25">
<textPath xlink:href="#beerpath" startOffset="40">SVG园区啤酒节</textPath>
</text>
<g id="beerdayneon">
<use xlink:href="#beerday" filter="url(#beerbottleblur)" />
<use xlink:href="#beerday" opacity="0.9" />
</g>
<circle id="beercircleback" r="110" fill="black" />
<circle id="beercircle" r="110" stroke="#31FF98" stroke-width="8" fill="none" >
<animate attributeName="stroke" id="f2" begin="0s;t2.end" from="#FFFFFF" to="#A8A8FF" dur="2s" />
<animate attributeName="stroke" id="s2" begin="f2.end" from="#A8A8FF" to="#FFFF00" dur="2s" />
<animate attributeName="stroke" id="t2" begin="s2.end" from="#FFFF00" to="#FFFFFF" dur="2s" />
</circle>
<g id="beercircleneon">
<use xlink:href="#beercircle" filter="url(#beerbottleblur)" />
<use xlink:href="#beercircle" opacity="0.9" />
</g>
<g id="beerdayboard">
<use xlink:href="#beercircleback" x="110" y="110" />
<use xlink:href="#beerbottleneon1" x="10" y="20" />
<use xlink:href="#beerglassneon" x="110" y="78" />
<use xlink:href="#beerdayneon" x="30" y="120" />
<use xlink:href="#beercircleneon" x="110" y="110" />
</g>
</defs>
<use xlink:href="#beerdayboard" x="10" y="10"/>
</svg>Для статьи о создании неоновых огней вы можете прочитать мою предыдущую статью.«Свет падшей порчи — CSS+SVG реализует эффект неонового света»а также«Слепите свои золотые глаза — CSS+SVG реализует неоновую анимацию», тут в основном рассказывают о каких-то очках знаний, которые раньше не использовались.
css动画效果，通过opacity让啤酒瓶突然消失
@keyframes flicker {
0% {
opacity: 0;
}
49% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
......
svg动画效果，通过rotate让啤酒瓶突然倾斜70度
<animateTransform attributeName="transform" id="f1" attributeType='XML' begin='0s;t1.end' dur='2s'
type="rotate" from="0 0 0" to="0 0 0" />
<animateTransform attributeName="transform" id="s1" attributeType='XML' begin='f1.end' dur='0.1s'
type="rotate" from="0 64 64" to="70 64 64" />
<animateTransform attributeName="transform" id="t1" attributeType='XML' begin='s1.end' dur='2s'
type="rotate" from="70 64 64" to="70 64 64" />
Как правило, css-анимации и svg-анимации двигаются плавно, но чтобы показать эффект мгновенного переключения неоновой подсветки, я настроил резкое переключение на ключевых кадрах, так что на 49 % изменения нет, а на 50 % оно внезапно отображается. , а затем с анимационным эффектом svg быстрое вращение под углом в определенный момент времени создает эффект неонового света пивной бутылки, внезапно переключающейся и наливающей вино. Тот же принцип применим к появлению и исчезновению пены в пивной кружке.
«SVG Park Beer Festival» использует «textPath» в svg
<path id="beerpath" d="M -20.501285,20 A 97.750643,50 0 0 0 175,20" />Сначала нарисуйте путь, на самом деле он выглядит так
«SVG Park Beer Festival» будет располагаться вдоль его пути, но расположение начинается с верхнего левого угла, поэтому мы используем параметр startOffset для настройки начальной позиции текста, и окончательный скорректированный код
<text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25">
<textPath xlink:href="#beerpath" startOffset="40">SVG园区啤酒节</textPath>
</text>Другой способ настроить положение — изменить координаты текста, а установка значения x текста также может настроить положение текста.
<text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25" x="40">
<textPath xlink:href="#beerpath" >SVG园区啤酒节</textPath>
</text>Этот индивидуальный эффект можно увидеть онлайн здесь:пожалуйста, посмотри
2. Логотип туалета
Чтобы выполнить задание лидерства, Арен взял на себя инициативу в распитии пива, которое накалило атмосферу среди туристов.Когда атмосфера Октоберфеста достигла своего апогея, Арен внезапно почувствовал контратаку пива, и мочеиспускание забурлило. Вдалеке виднелся завал Стена, на которой был написан логотип WC, Арен прислонился к стене и пошатнулся.
Для того, чтобы сделать его старым, я переработал WC, так что логотип явно битый, код такой:
<svg id="wc" t="1565534122398" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="5989" width="32" height="32">
<path stroke="black" stroke-width="25" stroke-dasharray="910,324"
d="M326.8 408.7c-22.1 79.5-44.2 159-66.2 238.6-16.4 59.3-16.3 59.3-83.6 54.6C143.9 577.3 110.4 451.4 75.9 322h62.4c23.5 103.4 47.1 206.8 72.4 318.2 21.7-82 41.5-156.9 61.3-231.9 3.2-12 5.9-24 9-36 14.5-55.6 14.5-55.6 78.6-50.3 27.7 104.2 55.7 209.8 86.4 325.6 22.1-100.7 41.5-190.7 61.7-280.5 11.3-50.6 11.8-50.5 71.3-44.3-33.6 126.6-66.9 252.3-100 377-61.1 9.4-61 9.3-75.5-44.8-22-82.1-44.3-164.1-66.4-246.1-3.4 0-6.8-0.1-10.3-0.2zM170 278.5h-53.6c0-46.7-3.7-92.5 1.1-137.4 4.3-39.7 41.2-69.9 81.3-75.9 15.8-2.4 32.1-3.1 48.1-3.2 180.8-0.2 361.7-0.3 542.5-0.1 99 0.2 134.1 35.7 134.1 134.4v82.1h-57.1c0-31.9 0.5-62.5-0.1-93-0.9-47.1-16.4-63.7-62-63.8-190.7-0.4-381.5-0.4-572.2 0-45.5 0.1-61.2 17-62 63.8-0.5 29.6-0.1 59.2-0.1 93.1zM112.9 745.1H170c0 31.9-0.4 62.5 0.1 93 0.8 46.8 16.5 63.8 62 63.9 190.7 0.4 381.5 0.4 572.2 0 45.6-0.1 61-16.7 62.2-63.8 0.7-28.4 0.9-56.9 1.4-85.3 0-1.2 0.7-2.3 2.1-6.4h50.1c0 45.3 3.6 91.1-1.1 136-4.1 39.4-41 69.8-81.4 75.9-17.1 2.6-34.5 3.2-51.8 3.2-178.3 0.2-356.7 0.3-535 0.1-103.9-0.1-137.8-34.3-137.8-138.2-0.1-25.7-0.1-51.4-0.1-78.4zM898.7 569.2c17.5 4.3 33.8 8.3 49.7 12.1-0.4 59.4-46.1 111.1-109.8 122.9-69.4 12.9-136.4 4.5-183.4-52.5-54.9-66.7-58.1-145.2-30.2-224.9 24.4-69.7 86.5-111.7 163.1-113.3 73.7-1.6 131.3 37.8 162 114.1-17.4 4.9-34.3 9.7-53.3 15-3.4-5.6-7-10.2-9.3-15.4-17.7-40.5-49.7-62.6-92.7-63.2-45.9-0.7-80.6 23-101.2 63.9-27 53.7-29.5 109.2-6.7 165.2 18.2 44.9 57.7 73 102.2 73.4 45.3 0.4 81.7-26.5 100.5-74.5 2.6-6.6 5.3-13.3 9.1-22.8z"
p-id="5990" fill="none"></path>
</svg>
В основном используйте штрих-dasharray, конкретныйСмотри сюда
Еще один сломанный объект — логотип в виде пальца.Чтобы отразить то, как он не закреплен и покачивается на ветру, используется эффект анимации.Код выглядит следующим образом:
<use id="finger" xlink:href="#finger">
<animateTransform attributeName="transform" id="first1" begin="0s;second1.end" dur="0.5s"
type="rotate" from="80" to="100"></animateTransform>
<animateTransform attributeName="transform" id="second1" begin="first1.end" dur="0.8s" type="rotate"
from="100" to="80"></animateTransform>
</use>Для этого используется анимациятрансформ. В анимации svg ядро составляют три мушкетера: animate, animateTransform и animateMotion;
- animate в основном используется для изменения числовых свойств элементов, таких как ширина, высота и цвет.
- animateTransform в основном используется для изменения атрибутов преобразования элемента. Он в основном используется в сочетании с атрибутом Transform для внесения некоторых изменений в увеличение и уменьшение масштаба и наклонное вращение. Этот пример используется для вращения.
- animateMotion в основном изменяет пути, и есть случаи, которые будут подробно описаны ниже.
3. Сильное мочеиспускание
Логотип туалета смутил Арена. Он не знал значения стрелки на пальце. Глядя на свисающий палец, указывающий на землю, он вдруг понял, что это открытый туалет. Чрезвычайная ситуация была слишком велика для него, чтобы подумай, он распаковал его...
На самом деле, первое, о чем я подумал, это использовать"Облако на горизонте - создать облако с помощью html голыми руками, очень реально"В нем используется комбинация фильтров, feTurbulence+feDisplacementMap, они изменяют графику за счет шума и искажения, но эффект сложно описать. Вот исходная схема мочевыводящих путей:
Смахнула в inkcap tool.На первый взгляд,нарисовали люди с жизненным опытом.Эта дуга,это чувство волны,как же это можно было сделать без десятилетий стояния и писанья. Затем я сделал первую версию с фильтром и анимационным эффектом.
<filter id="filter-suibian" width="350%" height="250%" x="-100%" y="-100%">
<feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="1" seed="1" />
<feDisplacementMap in="SourceGraphic" scale="0">
<animate attributeName="scale" id="first2" begin="0s;second2.end" from="5" to="15" dur="0.5s">
</animate>
<animate attributeName="scale" id="second2" begin="first2.end" from="15" to="5" dur="1s"></animate>
</feDisplacementMap>
</filter>
...
<use xlink:href="#suibian" filter="url(#filter-suibian)"/>Окончательный эффект выглядит следующим образом:
Этот эффект довольно странный.Посмотрев его в течение длительного времени, я чувствую, что мне все еще нужно пойти в мужскую больницу Гуанчжоу, чтобы решить проблему нижней урологии.Под сильным дискомфортом нижней части тела я сдался и решил пойти ко второму изданию.
<filter id="shock2">
<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1" seed="2" result="noise" id="noise">
<animate attributeType="XML" attributeName="seed" from="2" to="120" dur="10s"
repeatCount="indefinite" />
</feTurbulence>
<feMorphology id="morph3" in="SourceGraphic" operator="dilate" radius="1" result="morph1" />
<feMorphology id="morph4" in="morph1" operator="erode" radius="1" result="morph2" />
<feComposite operator="out" in="morph2" in2="morph1" result="strokeText" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="strokeText" in2="noise"
result="displacementMap" color-interpolation-filters="auto" scale="10" />
<feGaussianBlur stdDeviation="1" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="displacementMap" />
</feMerge>
</filter>
<filter id="blur-suibian">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<g id="suibian1">
<use xlink:href="#suibian" width="310" filter="url(#blur-suibian)" />
</g>
<use xlink:href="#suibian1" filter="url(#shock2)" />Эта комбинация фильтров на самом деле здесь не используется, меня все видели«Слепите свои золотые глаза — CSS+SVG реализует неоновую анимацию»Люди в статье знают, что этот фильтр используется для эффектов неонового света, я добавил размытие по Гауссу (feGaussianBlur) и попробовал (ба, я не пробовал). Не знаю, попробую ли я, но после того, как попробую...
Я чувствую, что по крайней мере урологической проблемы нет, но Арен должен пить много пива, а количество многовато.
4. Мухи ползают и ползают
А Рен, наконец, почувствовал облегчение, но этот нецивилизованный шаг также вызвал изменения в окружающей среде.Сюда прилетела муха, чувствительная к запаху, опьяненная запахом (это из Циндао или чисто сырое?)
AnimateMotion, о котором я упоминал ранее, наконец-то используется. Чтобы animateMotion появился, я специально подогнал муху. Легко ли это для меня?
Это дорожная карта, которую я нарисовал с помощью inkcap, и она сопровождается маленькой мухой ------- вот она ----->, очень маленький
<g id="fly">
<image xlink:href="fly.png" filter="url(#shadow)" width="8">
<animateMotion
path="m -54.38608,206.12261 34.03516,7.36844 38.94745,-3.50878 48.070278,-12.63161 26.315844,-21.40355 35.438668,18.24565 47.7194,-14.38599 43.50886,-31.22814 9.82459,-23.15794 -6.31581,-16.84214 -17.54389,-7.01756 -22.10531,0.70176 -9.82458,21.40355 -8.42107,23.50882 -35.78955,1.75439 -23.50883,-14.73687 -34.035154,16.49126 -29.824624,28.42111 -46.3158872,20.7018 -25.9649658,-14.38599 -16.491265,12.28072 z"
dur="10s" rotate="auto" repeatCount="indefinite" />
</image>
</g>Путь здесь представляет собой исходный код svg зигзагообразной графики, нарисованной на картинке выше. С помощью animateMotion мухи могут ходить по пути пути. Обратите внимание на параметр поворота. Если для него не установлено значение «авто», изображение мухи будет просто двигаться по пути Очень фальшиво, это выглядит так.
Такая муха, которая может реверсировать, явно не земное существо.Арену легко заподозрить, что это база инопланетных существ.Чтобы рассеять подозрения Арена, я решил добавить атрибут вращения. Добавление rotate=auto отличается, картинка будет автоматически подстраивать угол по ходу пути, эффект после добавления такой
Это кажется намного более реальным.
5. Три тени
Перед тем, как прийти, Арен внимательно прочитал статью.«Облака и луны приходят к цветам и теням — реализация комбинаций нескольких технологий SVG»статьи, чтобы доказать, что он был там, он направил текущую воду на цветок...
Внутренняя история: Как упоминалось в предыдущей статье, Чжан Сянь, автор книги «Юнь Поюэ Лай Хуа Нонгин», имеет прозвище «Чжан Саньин». Чтобы воздать ему должное, я соединил тень цветка, тень Арена и тень пивной бутылки, которые также являются тремя тенями...
Код Хуайинга:
<image id="huazhi" xlink:href="huazhi.png" width="100">
<animateTransform attributeName="transform" id="first" begin="0s;third.end" dur="0.5s" type="rotate"
from="0 73 199" to="-5 73 199"></animateTransform>
<animateTransform attributeName="transform" id="second" begin="first.end" dur="0.2s" type="rotate"
from="-5 73 199" to="-7 73 199"></animateTransform>
<animateTransform attributeName="transform" id="third" begin="second.end" dur="0.4s" type="rotate"
from="-7 73 199" to="0 73 199"></animateTransform>
</image>
<use id="huazhiyin" xlink:href="#huazhi" filter="url(#huazhishadow)" transform="skewX(29)" />
<use xlink:href="#huazhiyin" x="-225" y="390" />
Код спинки:
<image xlink:href="by.png" x="140" y="368" width="150" filter="url(#blur-moon)" transform="skewX(10)" />Код тени от пивной бутылки (винная бутылка нарисована в svg, а не в png)
<svg id="jiupin" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm"
viewBox="0 0 210 297" version="1.1" id="svg5721" inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="jiuping.svg">
<defs id="defs5715" />
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0"
inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="-112.85714"
inkscape:cy="560" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"
inkscape:window-width="1920" inkscape:window-height="1000" inkscape:window-x="-11"
inkscape:window-y="-11" inkscape:window-maximized="1" />
<metadata id="metadata5718">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
<path style="fill:#000000;stroke-width:0.12662637" inkscape:connector-curvature="0"
d="m 96.940112,135.10889 c -1.332179,-1.77624 -4.440595,-4.4406 -6.660894,-5.77278 -2.220298,-1.33218 -3.108418,-4.88465 -3.108418,-5.77277 0,-0.88812 0.44406,-4.4406 0.44406,-6.21684 0,-1.77623 -1.332178,-5.32871 -1.332178,-6.66089 -0.44406,-0.88812 -0.888119,-3.99654 -0.888119,-6.21683 0,0 1.332179,0.44405 1.332179,-1.33218 V 91.146988 c 0,0 0.444058,-0.88812 -1.332179,-1.332179 -1.776239,-0.44406 -4.440597,-0.888119 -6.660894,-0.888119 -2.220299,0 -5.328715,0.444059 -6.660894,0.888119 -1.776239,0.444059 -1.776239,0.888119 -1.776239,0.888119 v 11.989612 c 0,1.77624 1.776239,1.77624 1.776239,1.77624 0,2.22029 -0.44406,5.32871 -0.88812,6.21683 -0.444059,1.33218 -1.332179,4.88466 -1.332179,6.66089 0,1.77624 0.44406,5.32872 0.44406,6.21684 0,0.88812 -0.44406,4.44059 -3.108416,5.77277 -2.664359,1.33218 -5.328717,3.99654 -6.660895,5.77278 -1.332179,1.77624 -0.888119,5.77277 -0.888119,5.77277 v 48.84656 c 0,0 0,16.4302 0.44406,20.42674 0,3.99654 2.664357,7.54902 2.664357,7.54902 h 32.41635 c 0,0 2.664358,-3.55248 2.664358,-7.54902 0,-3.99654 0.44406,-20.42674 0.44406,-20.42674 v -48.84656 c -0.44406,0 0,-3.99653 -1.332179,-5.77277 z"
p-id="5216" id="path5700" />
<path style="fill:#000000;stroke-width:0.12662637" inkscape:connector-curvature="0"
d="m 100.93664,215.48368 c 1.77624,-1.33218 4.4406,-4.4406 5.77278,-6.6609 1.33218,-2.22029 4.88465,-3.10841 5.77277,-3.10841 0.88812,0 4.4406,0.44406 6.21684,0.44406 1.77623,0 5.77277,-1.33218 6.66089,-1.33218 0.88812,-0.44406 3.99654,-0.88812 6.66089,-0.44406 0,0 -0.44406,1.33218 1.33218,1.33218 h 11.98961 c 0,0 0.88812,0.44406 1.33218,-1.33218 0.44406,-1.77624 0.44406,-4.4406 0.44406,-6.6609 0,-2.22029 -0.44406,-4.88465 -0.44406,-6.66089 -0.44406,-1.77624 -1.33218,-1.33218 -1.33218,-1.33218 h -11.98961 c -1.77624,0 -1.33218,1.33218 -1.33218,1.33218 -2.66435,0 -5.32871,-0.44406 -6.66089,-0.44406 -0.88812,-0.44406 -4.88466,-1.33218 -6.66089,-1.33218 -1.77624,0 -5.32872,0.44406 -6.21684,0.44406 -0.88812,0 -4.44059,-0.44406 -5.77277,-3.10842 -1.33218,-2.66435 -3.99654,-5.32871 -5.77278,-6.66089 -1.776237,-1.33218 -5.772767,-0.88812 -5.772767,-0.88812 H 46.317299 c 0,0 -16.430195,0 -20.426735,0.44406 -3.99654,0 -7.54902,2.66436 -7.54902,2.66436 v 32.41635 c 0,0 3.55248,2.66436 7.54902,2.66436 3.99654,0 20.426735,0.44406 20.426735,0.44406 h 48.846574 c 0,-1.33218 3.99653,-0.88812 5.772767,-2.2203 z"
p-id="5217" id="path5702" />
</g>
</svg>
<use id="jiupinshadow" xlink:href="#jiupin" width="80" filter="url(#blur-moon)" transform="skewX(10)" />
<use xlink:href="#jiupinshadow" x="40" y="0" />Последняя полная версия такая
Ведущий: Арен, я слышал, что вы очень хорошо продаете на Фестивале пива.
Арэн: Да, для того, чтобы повысить популярность парка, я много пил и вдохновлял многих людей.Вы довольны ведущим?
Ведущий: Доволен, у юноши есть будущее, но есть одно дело, которое вам нужно закрыть.
Арэн: в чем дело?
Ведущий: Люди в парке сказали, что когда вы, наконец, покинули Октоберфест, вы кричали: «В этом раунде я приглашаю вас», и они прислали счет.
Арэн: Лидер, это потому, что я слишком много выпил, не могу сосчитать...