个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
29
4
我正在尝试在悬停时为 svg 文本元素的每个字母设置动画(制作然后跳转)。为此，我将每个字母都放在 <tspan> 中。并在其上添加动画，无论如何变换不起作用。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<style type="text/css">
svg text tspan {
fill: #666;
animation:jump 5s linear;
}
@keyframes jump {
100% {
fill: red;
transform: translateY(40px);
}
}
</style>
<body>
<svg overflow="visible">
<text font-size="20px" x="0" y="21"><tspan>t</tspan><tspan>e</tspan><tspan >s</tspan><tspan >t</tspan></text>
<text font-size="20px" x="0" y="42"><tspan>2 </tspan><tspan>l</tspan><tspan>i</tspan><tspan>g</tspan><tspan>n</tspan><tspan>e</tspan></text>
</svg>
</body>
</html>最佳答案
这通过 SMIL 为每个字母设置动画。这有点重复，因为 SMIL 动画仅适用于单个目标。
我们还必须避免在错误的位置使用空格，否则文本元素会假设我们实际上想要显示它而不是为了整洁。
<svg>
<text y="50 50 50 50">
<tspan>T<animate
attributeName="dy" from="0" to="-40"
dur="5s" begin="mouseover" restart="whenNotActive" /><set
attributeName="fill" to="red"
dur="5s" begin="mouseover" restart="whenNotActive" /></tspan><tspan>e<animate
attributeName="dy" from="0" to="-40"
dur="5s" begin="mouseover" restart="whenNotActive" /><set
attributeName="fill" to="red"
dur="5s" begin="mouseover" restart="whenNotActive" /></tspan><tspan>s<animate
attributeName="dy" from="0" to="-40"
dur="5s" begin="mouseover" restart="whenNotActive" /><set
attributeName="fill" to="red"
dur="5s" begin="mouseover" restart="whenNotActive" /></tspan><tspan>t<animate
attributeName="dy" from="0" to="-40"
dur="5s" begin="mouseover" restart="whenNotActive" /><set
attributeName="fill" to="red"
dur="5s" begin="mouseover" restart="whenNotActive" /></tspan></text>
</svg>关于html - SVG 动画 : tspan translation，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54314670/
29
4
0
不知为何定位tspan即使 tspan 元素也会保留标签已关闭。 123 http://jsfiddle.net/4fzqmeud/1/ 两个号码 2和 3受 tspan 的影响定位即使只
如何通过javascript或jquery从DOM中删除tspan元素？ abc.com 注意:tspan 没有定义 id 或 class，该元素是通过 ajax 请求动态生成的。 一般来说，我的问题
我正在寻找一种方法来倾斜 tspan与 transform="skewX(-45)" ，但它似乎只适用于父 text作为一个整体。问题是想包围tspan s 不受偏斜的影响，只有中间的一个。我不想使用
我有这个代码: " + ¥5,000.00 + " 这显示了这个:¥5,000.00 我想要的是向我展示中国国旗，如下所示:尝试了很多方法，还是不行。其中之一是
从已经包含类似内容的 DOM 开始 ...我想以编程方式修改 d3.select("#svg0") 中的元素所以我最终得到 Lorem ipsum dolor sit amet 这是我所能得
我在使用此 SVG 时遇到两个问题。首先，我需要它来使用 Raleway 字体。其次，我需要相反的文字。我尝试过使用 CSS 平移和旋转，但它们没有提供我正在寻找的结果。我已经阅读了 SVG 样式的文
我想分割用户在输入文本框中输入的文本并附加到 svg 文本的 tspan 中 示例: 输入的文本例如:“我有一些文本在此容器中换行成三行” 我想让我的 jquery/javascript 解析这些行
我正在使用 d3js，其中 lib 根据数据创建节点和链接。在某些地方，有一些特定的要求，需要在同一行中添加多个文本，例如 url“www.xyz.com/home/user”(此处为 3 个字符串“
我尝试遵循其他用户对此的提示，但似乎我没有得到正确的结果或者根本无法完成。我正在尝试使用 tspan 标签将图像添加到 SVG 文本标签。感谢任何建议。 这是片段:https://jsfiddle.n
svg { width: 100%; height: 100px; border: solid 1px blue; font-family: monospace; tr
这是我在 Canvas 上移动文本的代码: paper .text(self.x, self.y, "Jeaaaaaaaaaaaaaaah") .attr({ fill:
CSS @keyframes moveText { 0% { y:100; } 100% { y:300; } } #Achieve t
我正在为 SVG 图像 (v2.0) 渲染多行文本。每个文本行都表示为一个 tspan 元素。我循环遍历所有 tspan，并将它们作为新子元素附加到文本元素 (this.node)。 while (t
我目前有以下结构 svg g circle text text text text tspan class='minus-clicks' ...
我有一些创建树状图的 D3.js 代码，但是我正在尝试稍微更改代码以阻止为值为 0 的元素打印不必要的标签。 以下代码似乎添加了 tspan 并为其赋予文本值。但是，如果从 .text(functio
我拆开一个大的 SVG 并发现了这个奇怪的故障 (fiddle here) Word1 Word2 用一行 CSS: svg { text-tr
我正在尝试在 svg 按钮内的 tspan 元素内指定字体系列。它似乎没有注册，我也找不到任何关于此的文档。我只找到了 svg 中文本元素的文档。我的无数次尝试都没有使文本与网站其余部分的风格相匹配。
我目前正在使用 BeautifulSoup 进行 xml 解析，但不知道如何从 tspan 标签中获取信息。我正在解析的 xml 如下所示: APPROX. BARREL WEIGHT (KG): &
我正在尝试在悬停时为 svg 文本元素的每个字母设置动画(制作然后跳转)。为此，我将每个字母都放在 中。并在其上添加动画，无论如何变换不起作用。 Test svg text tspan {
我在 SVG 上遇到字体大小问题，因为我们可以在 svg 中看到 font-size:16px 与 paragraph font-size 不同，但它们具有相同的值 16px .我想在段落中使用 sv
我是一名优秀的程序员,十分优秀！