程序员经验分享-hwhale

我希望此 SVG 中的橙色齿轮（带有类旋转）使用 CSS 旋转。但它会在页面上 360 度移动。我究竟做错了什么？

2024-04-06

我希望橙色齿轮像齿轮旋转一样旋转，但不要在页面上移动。请帮助我，我做错了什么？下面是我的代码，我还给出了 codepen 的链接。

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.spin
{


   -webkit-animation: spin 5s infinite linear;
  -moz-animation: spin 5s infinite linear;
  -o-animation: spin 5s infinite  linear;
   animation: spin 5s infinite linear;
}


@-webkit-keyframes spin {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  from {-moz-transform: rotate(0deg);}
  to {-moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
  from {-o-transform: rotate(0deg);}
  to {-o-transform: rotate(360deg);}
}
@keyframes spin{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}


</style>
</head>

<body>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300px" height="300px" viewBox="0 0 143 143" style="enable-background:new 0 0 143 143;" xml:space="preserve">
<g>
    <circle style="fill:#0A76A6;" cx="71.154" cy="72.193" r="71.193"/>
    <path style="fill:rgba(0,0,0,0.5);" d="M142.299,74.125l-33.557-33.551c-0.325-0.336-0.793-0.549-1.301-0.549H34.875
        c-1.027,0-1.861,0.844-1.861,1.861V88.73c0,0.449,0.163,0.865,0.448,1.191l0.192,0.193l51.834,51.826
        C117.326,135.434,141.402,107.67,142.299,74.125z"/>
    <g>
        <g>
            <polygon style="fill:#E1EFFA;" points="81.089,102.875 61.213,102.875 63.738,90.586 78.563,90.586            "/>
            <polygon style="fill:#CEE2F1;" points="81.089,102.875 78.563,90.586 63.738,90.586 76.023,102.875            "/>
            <rect x="55.892" y="102.875" style="fill:#FFFFFF;" width="30.519" height="1.484"/>
        </g>
        <path style="fill:#364A5E;" d="M34.871,40.027c-1.023,0-1.855,0.838-1.855,1.857v46.844c0,1.025,0.833,1.857,1.855,1.857h72.568
            c1.019,0,1.854-0.832,1.854-1.857V41.885c0-1.02-0.836-1.857-1.854-1.857H34.871z"/>
        <g>
            <rect x="36.872" y="43.881" style="fill:#CEE2F1;" width="68.567" height="42.855"/>
            <rect x="39.364" y="51.869" style="fill:#FFFFFF;" width="63.577" height="32.373"/>
            <rect x="36.872" y="43.881" style="fill:#F78E36;" width="68.567" height="5.496"/>
            <path style="fill:#FFFFFF;" d="M101.924,46.67c0,0.447-0.365,0.814-0.812,0.814H61.116c-0.447,0-0.814-0.367-0.814-0.814v-0.08
                c0-0.447,0.368-0.814,0.814-0.814h39.997c0.446,0,0.812,0.367,0.812,0.814V46.67z"/>
            <g>
                <circle style="fill:#FFFFFF;" cx="44.72" cy="46.63" r="0.854"/>
                <path style="fill:#FFFFFF;" d="M50.546,47.484c-0.471,0-0.854-0.385-0.854-0.855s0.383-0.854,0.854-0.854
                    c0.469,0,0.85,0.383,0.85,0.854S51.015,47.484,50.546,47.484z"/>
                <circle style="fill:#FFFFFF;" cx="56.368" cy="46.63" r="0.854"/>
            </g>
            <g>
                <path style="fill:#364A5E;" d="M85.862,61.174v-1.307L84.9,59.541c-0.051-0.293-0.127-0.578-0.227-0.852l0.668-0.766
                    l-0.653-1.133l-0.995,0.197c-0.098-0.111-0.197-0.219-0.3-0.324c-0.105-0.102-0.213-0.201-0.324-0.299l0.198-0.996l-1.134-0.652
                    l-0.765,0.666c-0.273-0.096-0.559-0.174-0.85-0.229l-0.328-0.959h-1.309l-0.328,0.959c-0.293,0.055-0.576,0.133-0.851,0.229
                    l-0.763-0.666l-1.133,0.652l0.197,0.996c-0.111,0.098-0.221,0.197-0.324,0.299c-0.104,0.105-0.204,0.213-0.302,0.324
                    l-0.995-0.195l-0.653,1.131l0.667,0.766c-0.098,0.273-0.174,0.559-0.227,0.852l-0.959,0.326v1.307l0.959,0.328
                    c0.053,0.295,0.129,0.578,0.227,0.852l-0.667,0.764l0.655,1.133l0.993-0.195l-0.002-0.006c0.098,0.113,0.198,0.223,0.304,0.328
                    s0.215,0.207,0.328,0.303l-0.201,0.992l1.133,0.654l0.763-0.668c0.274,0.098,0.558,0.174,0.851,0.229l0.328,0.959h1.309
                    l0.328-0.959c0.291-0.055,0.576-0.131,0.85-0.229l0.765,0.668l1.134-0.654l-0.198-0.994l-0.004,0.002
                    c0.113-0.096,0.223-0.197,0.328-0.303c0.103-0.104,0.202-0.213,0.3-0.324l0.995,0.197l0.653-1.133l-0.668-0.764
                    c0.1-0.273,0.176-0.557,0.227-0.852L85.862,61.174z M79.537,63.135c-1.443,0-2.613-1.172-2.613-2.615
                    c0-1.441,1.17-2.611,2.613-2.611c1.445,0,2.613,1.17,2.613,2.611C82.15,61.963,80.982,63.135,79.537,63.135z"/>
                <g>
            <path class="spin"  style="fill:#F78E36;" d="M76.736,72.818v-2.098l-1.541-0.523c-0.084-0.469-0.207-0.926-0.363-1.367l1.07-1.225
                        l-1.049-1.818l-1.597,0.316c-0.157-0.18-0.313-0.352-0.481-0.52c-0.168-0.166-0.34-0.324-0.518-0.479l0.315-1.598l-1.819-1.049
                        l-1.226,1.07c-0.439-0.156-0.896-0.281-1.365-0.367l-0.524-1.539h-2.1l-0.524,1.539c-0.469,0.086-0.926,0.211-1.365,0.367
                        l-1.224-1.07l-1.82,1.049l0.318,1.598c-0.181,0.154-0.354,0.313-0.521,0.479c-0.165,0.168-0.326,0.34-0.482,0.52l-1.595-0.313
                        l-1.049,1.814l1.069,1.225c-0.155,0.441-0.28,0.898-0.364,1.367l-1.54,0.523v2.098l1.54,0.527
                        c0.083,0.473,0.208,0.924,0.364,1.365l-1.069,1.223l1.051,1.818l1.593-0.313l-0.004-0.012c0.155,0.182,0.318,0.359,0.486,0.527
                        c0.169,0.17,0.344,0.332,0.529,0.484l-0.326,1.592l1.82,1.053l1.224-1.072c0.439,0.158,0.896,0.279,1.365,0.365l0.524,1.539
                        h2.1l0.524-1.539c0.469-0.086,0.925-0.207,1.365-0.365l1.226,1.072l1.819-1.053l-0.315-1.594l-0.008,0.002
                        c0.18-0.152,0.357-0.314,0.525-0.484c0.168-0.166,0.324-0.34,0.481-0.52l1.597,0.316l1.049-1.818l-1.07-1.223
                        c0.156-0.441,0.279-0.893,0.363-1.365L76.736,72.818z M66.59,74.061c-1.266,0-2.291-1.025-2.291-2.291
                        c0-1.262,1.025-2.287,2.291-2.287c1.265,0,2.288,1.025,2.288,2.287C68.878,73.035,67.855,74.061,66.59,74.061z"/>
                    <path style="fill:#364A5E;" d="M66.59,66.846c-2.719,0-4.926,2.207-4.926,4.924c0,2.721,2.207,4.928,4.926,4.928
                        c2.721,0,4.924-2.207,4.924-4.928C71.515,69.053,69.312,66.846,66.59,66.846z M66.59,73.982c-1.222,0-2.211-0.99-2.211-2.213
                        c0-1.219,0.989-2.209,2.211-2.209s2.209,0.99,2.209,2.209C68.799,72.992,67.812,73.982,66.59,73.982z"/>
                </g>
            </g>
        </g>
    </g>
</g>
</svg>


</body>
</html>

http://codepen.io/nareshramini/pen/LbEKEJ http://codepen.io/nareshramini/pen/LbEKEJ


类似这样的东西也许适用于 Chrome。

.spin
{
   -webkit-animation: spin 5s infinite linear;
  -o-animation: spin 5s infinite  linear;
   animation: spin 5s infinite linear;
  transform-origin: center center;
  transform-box: fill-box;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

SVG

我希望此 SVG 中的橙色齿轮（带有类旋转）使用 CSS 旋转。但它会在页面上 360 度移动。我究竟做错了什么？ 的相关文章

  • React - 能够通过 props 控制 SVG 的填充颜色

    我有一个 SVG 这里称为 example svg 它作为组件被调用和创建 如下所示 import ReactComponent as Example from example svg import styles from index mo

  • SVG feColorMatrix 在 safari 中不起作用

    我有一个相当简单的设置 我想通过使用 svg 过滤器来改变 svg 图像的颜色

  • 使用 Javascript 动态添加时，SVG 元素无法正确缩放

    我正在尝试使用 Javascript 在 Bootstrap Grid 中添加 SVG 控件 我可以使用 Javascript 添加 SVG 但页面的缩放 调整大小的行为并不像使用静态 HTML 构建的那样 单击 添加页面 按钮时 一组新的

  • 使用 inkscape 命令行将 svg 转换为 png 失败

    我觉得我一定做了一些愚蠢的错误 但我就是无法让它发挥作用 这是我从 cmd 运行的命令 inkscape com C path ship svg e export png C Path ship png without gui 作为回报 我

  • 将 SVG 多边形转换为路径

    我有一个相当大的行政分区 SVG 文件 需要在 Raphael JS 中使用 它有 600 个多边形 重量为 1 2 Mb 现在 我需要将这些多边形转换为路径 以便它在 Raphael 中工作 最棒的多路径工具 http aautar di

  • 悬停时的 SVG 过滤器标签

    我正在尝试通过此过滤器对 SVG 进行动画处理

  • D3.以编程方式缩放后使用鼠标滚轮时缩放会跳转

    当我通过单击鼠标缩放到特定位置然后尝试平移或使用鼠标滚轮时 缩放行为会跳跃 看来我的缩放级别正在恢复 就像单击鼠标之前一样 这是我的事件处理程序 function click d var x y k if d centered d var

  • 无法在 Raphael 中缩放多条路径？

    我尝试使用当前的热门问题 使用 raphael 缩放多条路径 https stackoverflow com questions 3352698 scaling multiple paths with raphael 没有太多运气 我正在通

  • d3.js：在 SVG 线性渐变中过渡颜色？

    正如标题所说 使用D3 js 是否可以实现线性渐变的颜色过渡 例如 如果我有这个渐变 var gradient svg append svg defs append svg linearGradient attr id gradient a

  • 如何在 blaze-html 中渲染 blaze-svg 标记

    我想将使用 blaze svg 生成的 svg 图直接包含在使用 blaze html 生成的 html 中 两者都基于 blaze markup 所以我希望它很容易 diagram1 Svg diagram1 try1 Html try1

  • 有没有适用于 Android 的精简版 SVG 查看器？ [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 Android 是否支持查看 SVG 文件 或者是否有适用于 Android 平台的第 3 方 SVG

  • 动画 SVG 在页面加载之前不会显示动画

    我的网站包含大量广告 加载需要一段时间 确切地说 这并不是一个问题 但我注意到任何 SVG 动画都会立即绘制第一帧 但动画只有在页面上的所有加载完成后才会出现 SVG 动画通常指示旋转器 加载图标 有没有办法立即启动SVG动画 或者如果我将

  • svg / d3.js 矩形一侧的圆角

    我知道 svg 有一个内置函数可以做圆角 但我只需要在四个角中的 2 个上做圆角 我知道我可以在彼此之上绘制多个矩形来模仿这一点 但这看起来有点俗气 有什么方法可以使用剪辑或任何 d3 js 方法来做到这一点吗 现在我有一个水平条形图 其中

  • 直接从 Javascript 代码访问 SVG 文件

    我有这个 HTML 代码 它调用我的 javascript 代码 该代码用于仪表 在 javascript 代码中 我尝试访问 SVG 文件 并修改 仪表的 指针以显示所需的值 该代码运行良好 但是 我不想在 HTML 中调用 对象 id

  • 在 SVG 路径中动态创建渐变层

    我正在使用 SVG 创建动态路径 我现在希望在我的路径中添加渐变 但我被困住了 按照我尝试的方式 我的渐变沿着图 2 所示的路径进行 而我要求它是图 1 中的那种 Current 我的渐变和描边定义如下

  • SVG 元素出现在 DOM 中但在屏幕上不可见

    我尝试使用 SVG 绘制五线谱Vexflow http www vexflow com and 拉斐尔 js http raphaeljs com当我加载页面时 SVG 元素出现在 DOM 中 但它们不会出现在屏幕上 我检查了是否有任何 C

  • For 循环不适用于 JavaScript 动画

    我正在尝试编写一个 for 循环 以在单击形状按钮时重复 爆炸 路径的动画 但 for 循环无法工作 执行 而且我看不出哪里出了问题 for循环的目的 循环动画路径的过程 然后将动画反转回其原始路径 我知道问题出在 for 循环中的某个地方

  • 渲染时 Flutter SVG 延迟

    我在行中显示 SVG 文件形式的图像和文本 由于某些原因 svg 图像的渲染速度比屏幕的其余部分慢 从而导致延迟 这不利于用户体验 这种延迟正常吗 我该怎么做才能使整个屏幕同时渲染 Row mainAxisAlignment MainAxi

  • 如何在网站上使用 svg 元素制作块的屏幕截图？

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定

  • 将 SVG 文件转换为多个不同大小的 PNG 文件

    我有一个 SVG 格式的徽标图像 我想知道是否有办法生成多个不同大小的 png 文件 例如 我设置了 20 个不同的宽度和高度 它会生成 20 个 PNG 文件 如果我必须一次处理 5 张图像也没关系 我已经安装了 illustrator

随机推荐

热门标签