相关文章推荐
气势凌人的西装  ·  pointer-events - ...·  1 周前    · 
才高八斗的茶叶  ·  begin - SVG：可缩放矢量图形 | MDN·  1 周前    · 
冷冷的茄子  ·  北京航空航天大学主页平台系统 ...·  1 年前    · 
心软的猕猴桃  ·  Java：时间戳获取和日期时间格式化_51C ...·  2 年前    · 
火爆的香瓜  ·  Update-OfflineAddressB ...·  2 年前    · 
卖萌的海豚  ·  Shell脚本编程－－curl命令详解_sh ...·  2 年前    · 
坚强的牛肉面  ·  Python自动化测试-正则表达式解析 - ...·  2 年前    · 
Code  ›  begin - SVG：可缩放矢量图形 | MDN
mdn 矢量图 svg rect
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Reference/Attribute/begin
才高八斗的茶叶
1 周前
<offset-value>

一个 时钟值 代表了一个相对于 SVG 文档开头的时间点，SVG 文档开头通常是指 load 事件或者 DOMReady 事件触发的时间点。负值是合法的。

<syncbase-value>

描述一个 syncbase 以及一个可选的来自于 syncbase 的时偏移。元素的动画开始时间被定义为相对于另一个动画的开头或者激活结束。一个 ID 及其后面跟着的 .begin 或 .end 构成了一个 syncbase，ID 引用到另一个动画元素，.begin 或 .end 用来确定到底是与引用的动画元素的动画开头同步、还是与引用的动画元素的动画激活结束同步。

<event-value>

描述了一个事件以及一个可选的时偏移，用来确定动画开始的时点。触发指定事件的时点，被定义为动画开始的时点。一个元素 ID 及其后面跟着的一个点及其后面跟着事件名构成了一个合法的 event-value 值。事件名必须是元素支持的事件名。全部合法的事件（不一定是所有元素都支持的事件）包括这些：focusin、focusout、 activate 、 click 、 mousedown 、 mouseup 、 mouseover 、 mousemove 、 mouseout 、 DOMSubtreeModified 、 DOMNodeInserted 、 DOMNodeRemoved 、 DOMNodeRemovedFromDocument 、 DOMNodeInsertedIntoDocument 、 DOMAttrModified 、 DOMCharacterDataModified 、 SVGLoad 、 SVGUnload 、 SVGAbort 、 SVGError 、 SVGResize 、 SVGScroll 、 SVGZoom 、 beginEvent 、 endEvent 和 repeatEvent 。

<repeat-value>

描述了一个符合条件重复事件。repeat 事件发生了指定次数的时间点，被定义为元素动画的开始时间点。

<accessKey-value>

描述了一个用来触发动画的访问键。当用户按下指定的键时，元素动画就开始了。

<wallclock-sync-value>

描述了一个动画开始时间，是真实世界钟的时点。时点的句法遵守 ISO8601 定义的句法。

Offset 示例

html 
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="100"
      begin="0s"
      dur="8s"
      fill="freeze" />
  </rect>
  <rect x="35" y="60" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="75"
      begin="2s"
      dur="6s"
      fill="freeze" />
  </rect>
  <rect x="60" y="85" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="50"
      begin="4s"
      dur="4s"
      fill="freeze" />
  </rect>
  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />

begin-1-offset.svg

    
Syncbase 示例

    
html
<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">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="50"
      id="first"
      begin="0s;third.end"
      dur="4s" />
  </rect>
  <rect x="60" y="60" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="25"
      id="second"
      begin="first.end"
      dur="2s" />
  </rect>
  <rect x="85" y="85" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="25"
      id="third"
      begin="second.end"
      dur="2s" />
  </rect>
  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />

begin-2-syncbase.svg

    
Event 示例

    
html
<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">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      begin="startButton.click"
      dur="8s"
      fill="freeze" />
  </rect>
  <!-- trigger -->
    id="startButton"
    style="cursor:pointer;"
    x="19.5"
    y="62.5"
    rx="5"
    height="25"
    width="80"
    fill="#EFEFEF"
    stroke="black"
    stroke-width="1" />
  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Click me.
  </text>
  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />

begin-3-event.svg

    
Repeat 示例

    
html
<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">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      id="myLoop"
      begin="0s;myLoop.end"
      dur="4s"
      repeatCount="3" />
      attributeType="CSS"
      attributeName="fill"
      to="green"
      begin="myLoop.begin" />
      attributeType="CSS"
      attributeName="fill"
      to="gold"
      begin="myLoop.repeat(1)" />
      attributeType="CSS"
      attributeName="fill"
      to="red"
      begin="myLoop.repeat(2)" />
  </rect>
  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">1s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">2s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">3s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">4s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />

begin-4-repeat.svg

    
Accesskey 示例

    
html
<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">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      begin="accessKey(s)"
      dur="8s"
      fill="freeze" />
  </rect>
  <!-- trigger -->
  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Hit the "s" key
  </text>
  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />

该示例被嵌入到了一个 iFrame 中。如果你想要激活按键事件，你必须先点击它。


begin-5-accesskey.svg

        Specification
      
  1. SVG：可缩放矢量图形
  2. 教程
  3. 从零开始介绍 SVG
    1. 引言
    2. 入门
    3. 坐标定位
    4. 基本形状
    5. 路径
    6. 填充和边框
    7. 渐变
    8. 图案
    9. 文本
    10. 基础变形
    11. 剪切和遮罩
    12. 其他 SVG 内容
    13. 滤镜效果
    14. 在 SVG 中使用字体
    15. SVG image 元素
    16. SVG 工具
    17. SVG 和 CSS
  4. 指南
    1. 内容类型
    2. Linking
    3. 命名空间速成
    4. Scripting
    5. 使用 SMIL 的 SVG 动画
    6. 作为图片的 SVG
    7. 在 HTML 内容中应用 SVG 效果
    8. SVG filters
    9. SVG In HTML Introduction
  6. 参考
  7. 元素
    1. a
    2. <animate>
    3. animateMotion
    4. animateTransform
    5. circle
    6. clipPath
    7. defs
    8. desc
    9. ellipse
    10. <feBlend>
    11. feColorMatrix
    12. <feComponentTransfer>
    13. feComposite
    14. <feConvolveMatrix>
    15. feDiffuseLighting
    16. feDisplacementMap
    17. feDistantLight
    18. <feDropShadow>
    19. <feFlood>
    20. <feFuncA>
    21. <feFuncB>
    22. <feFuncG>
    23. <feFuncR>
    24. <feGaussianBlur>
    25. <feImage>
    26. feMerge
    27. feMergeNode
    28. <feMorphology>
    29. feOffset
    30. fePointLight
    31. feSpecularLighting
    32. feSpotLight
    33. <feTile>
    34. feTurbulence
    35. filter
    36. foreignObject
    37. <g>
    38. <image>
    39. line
    40. linearGradient
    41. <marker>
    42. mask
    43. metadata
    44. <mpath>
    45. path
    46. pattern
    47. polygon
    48. polyline
    49. <radialGradient>
    50. rect
    51. script
    52. <set>
    53. stop
    54. style
    55. svg
    56. switch
    57. symbol
    58. text
    59. textPath
    60. title
    61. tspan
    62. <use>
    63. <view>
  8. 属性
    1. accumulate
    2. additive
    3. alignment-baseline
    4. amplitude
    5. attributeName
    6. attributeType
    7. azimuth
    8. baseFrequency
    9. baseline-shift
    10. baseProfile

    11. begin
    12. bias
    13. by
    14. calcMode
    15. class
    16. clip

    17. clip-path
    18. clip-rule
    19. clipPathUnits
    20. color
    21. color-interpolation
    22. color-interpolation-filters
    23. cursor
    24. cx
    25. cy
    26. d
    27. data-*
    28. decoding
    29. diffuseConstant
    30. direction
    31. display
    32. divisor
    33. dominant-baseline
    34. dur
    35. dx
    36. dy
    37. edgeMode
    38. elevation
    39. end
    40. exponent
    41. fetchpriority

    42. fill
    43. fill-opacity
    44. fill-rule
    45. filter
    46. filterUnits
    47. flood-color
    48. flood-opacity
    49. font-family
    50. font-size
    51. font-size-adjust
    52. font-stretch

    53. font-style
    54. font-variant
    55. font-weight
    56. fr
    57. from
    58. fx
    59. fy
    60. glyph-orientation-horizontal

    61. glyph-orientation-vertical

    62. gradientTransform
    63. gradientUnits
    64. height
    65. href
    66. id
    67. image-rendering
    68. in
    69. in2
    70. intercept
    71. k1
    72. k2
    73. k3
    74. k4
    75. kernelMatrix
    76. kernelUnitLength
    77. keyPoints
    78. keySplines
    79. keyTimes
    80. lang
    81. lengthAdjust
    82. letter-spacing
    83. lighting-color
    84. limitingConeAngle
    85. marker-end
    86. marker-mid
    87. marker-start
    88. markerHeight
    89. markerUnits
    90. markerWidth
    91. mask
    92. mask-type
    93. maskContentUnits
    94. maskUnits
    95. max
    96. media
    97. method
    98. min
    99. mode
    100. numOctaves
    101. opacity
    102. operator
    103. order
    104. orient
    105. origin
    106. overflow
    107. paint-order
    108. path
    109. pathLength
    110. patternContentUnits
    111. patternTransform
    112. patternUnits
    113. pointer-events
    114. points
    115. pointsAtX
    116. pointsAtY
    117. pointsAtZ
    118. preserveAlpha
    119. preserveAspectRatio
    120. primitiveUnits
    121. r
    122. radius
    123. refX
    124. refY
    125. repeatCount
    126. repeatDur
    127. requiredFeatures

    128. restart
    129. result
    130. rotate
    131. rx
    132. ry
    133. scale
    134. seed
    135. shape-rendering
    136. side

    137. slope
    138. spacing
    139. specularConstant
    140. specularExponent
    141. spreadMethod
    142. startOffset
    143. stdDeviation
    144. stitchTiles
    145. stop-color
    146. stop-opacity
    147. stroke
    148. stroke-dasharray
    149. stroke-dashoffset
    150. stroke-linecap
    151. stroke-linejoin
    152. stroke-miterlimit
    153. stroke-opacity
    154. stroke-width
    155. style
    156. surfaceScale
    157. SVG attribute: crossorigin
    158. systemLanguage
    159. tabindex
    160. tableValues
    161. target
    162. targetX
    163. targetY
    164. text-anchor
    165. text-decoration
    166. text-rendering
    167. textLength
    168. to
    169. transform
    170. transform-origin
    171. type
    172. unicode-bidi
    173. values
    174. vector-effect
    175. version

    176. viewBox
    177. visibility
    178. width
    179. word-spacing
    180. writing-mode
    181. x
    182. x1
    183. x2
    184. xChannelSelector
    185. xlink:arcrole

    186. xlink:href

    187. xlink:show

    188. xlink:title

    189. xlink:type

    190. xml:lang

    191. xml:space

    192. y
    193. y1
    194. y2
    195. yChannelSelector
    196. z
    197. zoomAndPan
 
推荐文章
气势凌人的西装  ·  pointer-events - SVG：可缩放矢量图形 | MDN
1 周前
才高八斗的茶叶  ·  begin - SVG：可缩放矢量图形 | MDN
1 周前
冷冷的茄子  ·  北京航空航天大学主页平台系统 陶飞--中文主页--首页
1 年前
心软的猕猴桃  ·  Java：时间戳获取和日期时间格式化_51CTO博客_java时间戳转换日期格式
2 年前
火爆的香瓜  ·  Update-OfflineAddressBook (ExchangePowerShell) | Microsoft Learn
2 年前
卖萌的海豚  ·  Shell脚本编程－－curl命令详解_shell curl_Jaymeng8848的博客-CSDN博客
2 年前
坚强的牛肉面  ·  Python自动化测试-正则表达式解析 - 腾讯云开发者社区-腾讯云
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号