は、あなたのSVGをアニメーションと背景
として設定します質問:ここにあなたのリンクがありますアニメイトアドビイラストレーターでSVGイメージファイルを作成する方法を示しUBEチュートリアル(しかし、それは、そのように行われるアニメーションを使用してのちょうど良い例を持っていません):
youtube link tut on svg file creation and animation
そして、ここにanimateTransform
要素を使用する例とアニメーションのMozillaのドキュメントです:
Mozilla SVG animateTransform documentation
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<polygon points="60,30 90,90 30,90">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="indefinite"/>
</polygon>
</svg>
をここで
codepen using callout with svg background-image
は、一例として、いくつかのHTMLとCSSです::
<div class="svgEx marg">
<div class="row">
<div class="small-2 large-4 columns">Some text here.</div>
<div class="small-4 large-4 columns">Some more text here.</div>
<div class="small-6 large-4 columns">Even more text here.</div>
</div>
<div class="row">
<div class="small-2 large-4 columns">Some text here.</div>
<div class="small-4 large-4 columns">Some more text here.</div>
<div class="small-6 large-4 columns">Even more text here.</div>
</div>
<div class="row">
<div class="small-2 large-4 columns">Some text here.</div>
<div class="small-4 large-4 columns">Some more text here.</div>
<div class="small-6 large-4 columns">Even more text here.</div>
</div>
</div>
はCSS:
.svgEx {
background: url(https://ohdoylerules.com/content/images/css3.svg) no-repeat center center;
min-height: 500px;
}
.marg { padding: 100px 0;}
背景は十分に容易であるSVG画像を配置0
素晴らしいです、ありがとう!私はあなたがHTMLでアニメ化できるのか分からなかった! – Sean