将 g 中的标记文本转换 css 以脉动

Question

我在 SVG 数据中得到了一个模板。在这里我有一段文字我想脉动。

Html:

<tspan class="text animated pulse" x="14.325" y="39.18">50</tspan></text>

这是行不通的。

这里是link到codepen

Answer 1

也许这样试试？

tspan.text.animated.pulse {
  animation: pulse-text infinite;
  animation-duration: 1s;
}

@keyframes pulse-text {
  0% {font-size: 1em;}
  50% {font-size: 1.1em;}
  100% {font-size: 1em;}
}

Answer 2

嘿，谢谢你的回答.. 不，这不是选项;(( 我搞砸了这个 css class text animated pulse

<g transform="matrix(1,0,0,1,165.514,113.873)" class="no-kerning">
<text stroke-width="0" stroke="#5F5E5E" stroke-linejoin="round" fill="#5F5E5E" font-family="CurrencyRegular" font-size="40"><tspan class="text animated pulse" x="14.325" y="39.18">50</tspan></text>
</g>

Answer 3

对于 tspan 元素转换属性将不起作用。您可以尝试动画字体大小。检查更新后的代码。

https://codepen.io/anon/pen/WKVOzB

代码更改：-

tspan.text.animated.pulse {
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
   0%,100% {font-size:40px;}
   50% {font-size:50px;}
}

将 g 中的标记文本转换 css 以脉动

mark text in g transform css to pulsate

html

css

svg

tspan