本文主要包含案例,几个等相关知识,匿名希望在学习及工作中可以帮助到您
svg的几个小案例
最近经常用到svg，闲的无聊的时候做了几个简单的小例子，希望能帮到大家，svg会用了之后做动画和图片都方便了好多，接下来就看看小例子吧！！
1、例子一
css代码
html, body { width: 100%; height: 100%;}body { background: #131518;}#patt1 path { stroke: #ff509e;}#patt2 path { stroke: #95d13c;}#patt3 path { stroke: #00b6cb;}#patt4 path { stroke: #9753e1;}#mask1 rect { -webkit-animation: pulse 1.90476s infinite; animation: pulse 1.90476s infinite; -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);}#mask2 rect { x: 10; -webkit-animation: pulse 1.90476s infinite 0.47619s; animation: pulse 1.90476s infinite 0.47619s; -webkit-animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);}#squiggle1, #squiggle2, #squiggle3, #squiggle4 { background-blend-mode: multiply;}@-webkit-keyframes pulse { 0% {x: 10; } 50% {x: -20; } 100% {x: -50; }} @keyframes pulse { 0% {x: 10; } 50% {x: -20; } 100% {x: -50; }}html代码
<svg viewBox="0 0 200 200"> <defs><pattern id="patt1" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"> <path d="M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5" stroke="#f00" stroke-width="1" fill="transparent"></path></pattern><pattern id="patt2" x="30" y="15" width="60" height="60" patternUnits="userSpaceOnUse"> <path d="M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5" stroke="#00f" stroke-width="1" fill="transparent"></path></pattern><pattern id="patt3" x="0" y="30" width="60" height="60" patternUnits="userSpaceOnUse"> <path d="M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5" stroke="#0f0" stroke-width="1" fill="transparent"></path></pattern><pattern id="patt4" x="30" y="45" width="60" height="60" patternUnits="userSpaceOnUse"> <path d="M0,7.5C12.9,7.5 17.1,22.5 30,22.5C42.9,22.5 47.1,7.5 60,7.5" stroke="#fc0" stroke-width="1" fill="transparent"></path></pattern><linearGradient id="grad1" x1="0" x2="0.15" spreadMethod="repeat"> <stop offset="0%" stop-color="white" stop-opacity="1"></stop> <stop offset="75%" stop-color="white" stop-opacity="0"></stop></linearGradient><linearGradient id="grad2" x1="0.5" x2="0.65" spreadMethod="repeat"> <stop offset="0%" stop-color="white" stop-opacity="1"></stop> <stop offset="75%" stop-color="white" stop-opacity="0"></stop></linearGradient> </defs> <mask id="mask1"><rect fill="url(#grad1)" width="400" height="200"></rect> </mask> <mask id="mask2"><rect fill="url(#grad2)" width="400" height="200"></rect> </mask> <rect id="squiggle1" mask="url(#mask1)" fill="url(#patt1)" width="200" height="200"></rect> <rect id="squiggle2" mask="url(#mask2)" fill="url(#patt2)" width="200" height="200"></rect> <rect id="squiggle3" mask="url(#mask1)" fill="url(#patt3)" width="200" height="200"></rect> <rect id="squiggle4" mask="url(#mask2)" fill="url(#patt4)" width="200" height="200"></rect></svg>例子二
css代码
<div class="box"><svg width="200"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 302" > <g><polygon id="XMLID_1_" class="st0" points="129,131.3 56.6,141 11.9,83.1 39.7,15.5 112.2,5.8 156.8,63.7 "/><path id="XMLID_2_" class="st0" d="M-305-84"/><polygon id="XMLID_3_" class="st1" points="39.7,15.5 11.9,83.1 56.6,141 84.4,73.4 "/><animateTransform attributeName="transform" attributeType="XML" dur="1s" type="translate" from="0 0" to="150 0" repeatCount="indefinite"/></g><g> <polygon id="XMLID_1_" class="st0" points="129,131.3 56.6,141 11.9,83.1 39.7,15.5 112.2,5.8 156.8,63.7 "/><path id="XMLID_2_" class="st0" d="M-305-84"/><polygon id="XMLID_3_" class="st1" points="39.7,15.5 11.9,83.1 56.6,141 84.4,73.4 "/><animateTransform attributeName="transform" attributeType="XML" dur="1s" type="translate" from="150 150" to="0 150" repeatCount="indefinite"/></g><g> <polygon id="XMLID_1_" class="st0" points="129,131.3 56.6,141 11.9,83.1 39.7,15.5 112.2,5.8 156.8,63.7 "/><path id="XMLID_2_" class="st0" d="M-305-84"/><polygon id="XMLID_3_" class="st1" points="39.7,15.5 11.9,83.1 56.6,141 84.4,73.4 "/><animateTransform attributeName="transform" attributeType="XML" dur="1s" type="translate" from="150 0" to="150 150" repeatCount="indefinite"/></g> <g><polygon id="XMLID_1_" class="st0" points="129,131.3 56.6,141 11.9,83.1 39.7,15.5 112.2,5.8 156.8,63.7 "/><path id="XMLID_2_" class="st0" d="M-305-84"/><polygon id="XMLID_3_" class="st1" points="39.7,15.5 11.9,83.1 56.6,141 84.4,73.4 "/><animateTransform attributeName="transform" attributeType="XML" dur="1s" type="translate" from="0 150" to="0 0" repeatCount="indefinite"/></g></svg></div>例子三
