Successfully reported this slideshow.

絵本を作って感じたSVGの良いところとつまずいたところ

1

Share

Loading in …3
×
1 of 24
1 of 24

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

絵本を作って感じたSVGの良いところとつまずいたところ

  1. 1. 
 

  2. 2. ✦ ✦ ✦ ✦ ✦
  3. 3.
  4. 4.
  5. 5. Ŏ <g class=“chick”> <path d=“…”></path> </g> <g class=“stone”> <path d=“”></path> </g>
  6. 6. ŏ
  7. 7. @keyframes walking {
 0% { background-position: 0 0; } 100% { background-position: -705px 0; } }
 
 .walking-chick { animation: .6s walking steps(5) 5 }
  8. 8. @keyframes walking {
 0% { background-position: 0 0; } 100% { background-position: -705px 0; } }
 
 .walking-chick { animation: .6s walking steps(5) 5 } Ŏ
  9. 9. ŏ
  10. 10. Ŏ
  11. 11. <path id="wave-path" d="M0,0c0,0,566,66,566,118c0, 66.1-375,92.7-510,178c-36.7,2 3.2-12.2,44.5-8,72c4,26-48,70 -48,132V0z" data- to="M0-1c0,0,946-124,953,157c 1.6,66-106,106-132,179c-14.6, 40.9,13.2,35.7,22,93c25,163-7 71,71-843,71V-1z" fill="url(#pattern)"></path>
  12. 12.
  13. 13. <svg> <pattern id=“pattern”> <path>…</path> </pattern> <path d=“…” fill=“url(#pattern)"></path> </svg>
  14. 14. ✦ 
 ✦ ✦ 


×