<set>
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2015å¹´7æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
<set> 㯠SVG ã®è¦ç´ ã§ãæå®ããæéã ã屿§ã®å¤ãè¨å®ããã¨ããåç´ãªæå³ãæä¾ãã¾ãã
æååãè«çå¤ãªã©ãåççã«è£éã§ããªããã®ãå«ãã¦ããã¹ã¦ã®å±æ§åã«å¯¾å¿ãã¦ãã¾ããåççã«è£éã§ãã屿§ã«ã¤ãã¦ã¯ãé常㯠<animate> ãæ¨å¥¨ãã¾ãã
ã¡ã¢:
<set> è¦ç´ ã¯éå ç®ã§ããadditive 㨠accumulate 屿§ã¯æå®ãããã¨ãã§ãããæå®ããã¦ãç¡è¦ããã¾ãã
使ç¨ã³ã³ããã¹ã
| ã«ãã´ãªã¼ | ã¢ãã¡ã¼ã·ã§ã³è¦ç´ |
|---|---|
| 許å¯ããã¦ããå 容 | ä»»æã®æ°ãä»»æã®é åºã®ä»¥ä¸ã®è¦ç´ ã 説æçè¦ç´ |
屿§
to-
ãã®å±æ§ã¯ãã¢ãã¡ã¼ã·ã§ã³ã®åçæéã®éã対象ã¨ãã屿§ã«é©ç¨ããå¤ãå®ç¾©ãã¾ããå¤ã¯ã対象ã¨ãã屿§ã®è¦æ±ã¨ä¸è´ããªããã°ãªãã¾ããã å¤ã®å: <anything>; ããã©ã«ãå¤: ãªã; ã¢ãã¡ã¼ã·ã§ã³: ä¸å¯
DOM ã¤ã³ã¿ã¼ãã§ã¤ã¹
ãã®è¦ç´ ã¯ãSVGSetElement ã¤ã³ã¿ã¼ãã§ã¤ã¹ãå®è£
ãã¦ãã¾ãã
ä¾
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<style>
rect {
cursor: pointer;
}
.round {
rx: 5px;
fill: green;
}
</style>
<rect id="me" width="10" height="10">
<set attributeName="class" to="round" begin="me.click" dur="2s" />
</rect>
</svg>
仿§æ¸
| 仿§æ¸ |
|---|
| SVG Animations Level 2 > # SetElement > |