问题标签 [svg-animationelements]

有哪些配置部分？据我测试，这就是我确定的： - body background-image 需要设置为 SVG - body background-sizing - 为了填充背景，我尝试了 100% 100% - svg 标签的属性 viewBox 必须包含定义比例的原始值？- svg 的宽度和高度属性不做任何事情？- svg 属性 preserveAspectRatio 不做任何事情？- svg 的内容对象是.. 好吧我不知道如何将它对齐到右边

到目前为止，背景仍然可以缩放，并且内容保持居中。在这件事上有什么智慧吗？

jsfiddle上的测试用例

谢谢各位

编辑：内容不应该缩放，但主要的 SVG 区域应该。使内容始终与右侧对齐。

我正在运行 'php artisan migrate' 我收到了这个错误：

([Illuminate\Database\QueryException] SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table users add unique users_email_unique(email))) 之后在AppServiceProvider.php

添加此代码

（使用 Illuminate\Support\Facades\Schema;和 Schema::defaultStringLength(191);）

现在我得到另一个错误

（PHP 致命错误：无法使用 Illuminate\Support\Facades enter code here\Schema 作为 Schema，因为该名称已在第 7 行的 C:\xampp\htdocs\projects\app\Providers\AppServiceProvider.php 中使用）

以下是 AppServiceProvider.php 代码

我想使用 GreenSock (GSAP) 从 SVG 图像中仅对某个类的某些元素进行动画处理。

要为类的所有元素设置动画，我会这样做：

现在，我怎样才能选择一个（或多个）随机元素并像这样为它们设置动画。

我想要做的是轮流和无限期地随机地为它们设置动画。

I have two SVG path animations that use <circle for the object to move along the path, how would it be possible to change their duration depending on each path separately, for instance, circle1 with a duration of 1s and circle2 with a duration of 2s? As it seems that changing the circle duration goes for all circles, not for their id-s

此处包含 svg 文件的图像（无法上传 svg 文件）

我想将鼠标悬停在上面，并以动画的形式仅将圆圈的背景（从内圈到边缘）更改为蓝色。

如果动画是一种从圆圈中间向外摆动的效果，那就更好了。如果它是一种“随机”的外观，蓝色的摇摆效果，那就太好了。重要的是它从圆圈的中间开始动画，直到整个圆圈都是蓝色的。当鼠标/悬停被移除时，动画是向后的。

这在 svg/css 领域是否可行，有人可以指出正确的方向吗？

我希望仅为您悬停的六边形触发 Tween 动画。目前只有顶部六边形触发了六边形周围模糊的红色轮廓动画。

每个单独的六边形应仅将过滤器应用于自身。

提前感谢您的建议。

https://codepen.io/daneli84/pen/OJVZmeJ

HTML

CSS

JS

假设您有以下 Hello 标签的 SVG 动画，当您单击小方块时会触发该动画：

如果再次单击按钮，如何以相反的逻辑执行相同的动画；即在每（2 n）次点击时将hello元素旋转回其原始状态，并在每（2 n - 1）次点击时将其旋转以再次垂直显示？

请体谅，我是 SVG 初学者。在同一问题上工作了几天后，感谢@Robert Longson（单击按钮时切换SVG动画效果）和this，我走得更远了，但我又被困在这一点上；我不知道如何进行。请仔细阅读，本论坛没有关于相同/相似问题的问题。

我的目标：

A）第一次单击矩形->水平显示文本。

B）第二次单击矩形->另一种意义上的动画，将文本元素旋转+翻译回其初始状态，就像第一次单击之前一样。

C）（这部分不起作用）当然，您应该能够根据需要多次触发此切换。单击矩形至少 3 次，您会注意到问题。出于某种原因，第一个动画（垂直 --> 水平显示）从第 3 次单击开始以 -90 度的偏移量开始，而第二个动画就像一个魅力：

我还缺少什么？

为什么这个在 FF 和 Chrome 中有效的动画在 Safari 中无效（begin="click"不会触发 Safari 中的 animateTransform；替换click为例如 0，您会看到它被触发）？

仅在添加以下 js 时：

动画可以打开和关闭一次，但又会失败。根据规范，Safari 应该支持 animateTransform （我想我会放弃使用 fakesmile 来做到这一点，所以忘记 IE ..）。

关于如何让 Safari 以与 Chrome + FF 相同的方式工作的任何想法？

更新

越来越近，但仍然不完美（多次单击矩形，您会发现它远未优化）.....：小提琴

编辑对应于添加此脚本：

最好使用在动画结束时触发的事件，然后暂停动画。有这样的事吗？我会继续挖掘...

我必须编写一个代码，圆圈应该在SVG下面的一些路径下

https://codepen.io/lzwdct/pen/poRYVXZ

想象一下路径就像车道，而圆圈在路径（如桥）下方经过，它不应该出现在桥下。

有没有办法实现它？