主页 / user-28748

Alexandr_TT's questions

Martin Hope
Alexandr_TT
Asked: 2025-04-21 12:42:09 +0000 UTC
  • 6

我在 EnSO 版主Dharman的个人资料中看到了以下警告：

在此处输入图片描述

免费翻译：

警告：

您对 SQL 注入的威胁非常大，应该使用参数化的准备好的语句，而不是手动构建查询。它们由 PDO 或 MySQLi 提供。永远不要相信任何输入数据！即使您的请求仅由受信任的用户提出，您仍然有可能损坏您的数据。屏蔽还不够！

如果版主认为在他的个人资料中发布这个警告很重要，以便尽可能多的人可以看到它，那么我自然会对SQL 注入到底是什么样的怪物以及与之相关的一切问题感兴趣：

来自MySQLi标签描述

PHP 编程语言中使用的关系数据库驱动程序的扩展，用于提供对 MySQL 数据库的访问。 MySQLi 是 PHP MySQL 驱动程序的更新版本，并在数据库处理方面提供了各种改进。

我希望得到更详细的答复。

如何实施保护，最好有例子并附上简短的解释性评论。

база-данных
Martin Hope
Alexandr_TT
Asked: 2025-01-28 22:41:54 +0000 UTC
  • 8

尝试弄清楚 CSS 和 SVG 动画如何交互。为此，我采用了最简单的场景：

  1. 角色从右向左移动，同时上下移动（svg）
  2. 旋转 180 度 (css) 并
  3. 向后移动至左右 (css)

以下是代码：

body { perspective: 1000px;}

  .container{
  width:80vw;
  height:80vh;
}  
#SnowMaiden {
transform-box:fill-box;
transform-origin: center center;
animation: Maiden_rotate 2s linear 8s  forwards, Maiden_translate 14s linear 16s forwards;
}
@keyframes Maiden_rotate {
0%{ transform:  rotate3d(0,1,0,20deg);}
50%{ transform:  rotate3d(0,1,0,80deg);}
100%{ transform:  rotate3d(0,1,0,180deg);}
}
@keyframes Maiden_translate {
0%{ transform:  translate3d(300px,10px,10px);}
50%{ transform:  translate3d(800px,10px,10px);}
100%{ transform:  translate3d(1400px,10px,10px);}
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" > 

       <!-- Фон с ёлочкой -->
    <image id="img1" xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="100%" height="100%" opacity="1"   />  
    
    <image  id="SnowMaiden" x="1400" y="650"  xlink:href="https://isstatic.askoverflow.dev/LU3Bvfdr.png" opacity="0">
                  <!-- Анимация появления девочки с корзинкой -->
   <animate id="op1_Maidan" attributeName="opacity"   values="0; 1" dur="2s" begin="svg1.click"  repeatCount="1" fill="freeze" restart="whenNotActive" />   
                            <!-- Перемещение  по горизонтали -->
  <animate id="Go_Maidan" attributeName="x"   values="1400;1300;1200;1100;1000;900;800;700;600;500;400;300" dur="5s" begin="op1_Maidan.end"  repeatCount="indefinity" fill="freeze"  restart="whenNotActive"  />   
                         <!-- Перемещение по вертикали -->    
   <animate id="Go_Maidan_y" attributeName="y"   values="650;670;650;630;650;670;650;630;650;670;650;630" dur="5s" begin="op1_Maidan.end"  repeatCount="indefinity" fill="freeze"   restart="whenNotActive"  />  
</image>  
</svg>

从代码片段的结果可以看出：
180 度旋转之前的 SVG 动画阶段一切正常。故障在转弯后开始。看起来 CSS 动画与之前的 SVG 动画冲突，这就是 CSS 运动结果不可见的原因。
当然，您可以纯粹用 SVG 或仅使用 CSS 来实现动画。
我有一个问题，如何让 SVG 和 CSS 动画正确协同工作？

html
Martin Hope
Alexandr_TT
Asked: 2025-01-16 14:55:44 +0000 UTC
  • 12

当角色（在本例中为雪人）循环移动时，他应该消失在经过树后面的轨道部分上。

在此处输入图片描述

使用动画命令：animateMotion，实现雪人沿给定路径的运动path id="trace"

点击后开始移动

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet">
                  <!-- Фон -->
<image xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" width="1680" height="1050"/>
                  <!-- Трасса движения -->
<path id="trace" style="fill:none;stroke:#e20000;stroke-width:2" d="M1297.7 862.8c-58.4-49.6-136 24.8-251.6-4.7-18.5-4.7-56.8-38.5-88.1-52a394.6 394.6 0 0 0-77.1-22c-20.7-4.2-42.1-11.4-63-7.8-24.2 4.2-45.2 19.9-66 33-18 11.4-30.2 32.3-50.3 39.4-38.1 13.3-102.2-34.1-121.2 1.5-7.6 14.4 10.5 39.8 26.8 41 258 18 411.5 14.2 649.6 0 16.6-1 53.6-17.7 41-28.4z"/> 
                   <!-- Снеговик        -->
  <image  id="Snowman" x="-100" y="-340" transform="scale(0.4)" xlink:href="https://isstatic.askoverflow.dev/mbefD.png"   opacity="1">
    </image>
    <animateMotion xlink:href="#Snowman"
    begin="svg1.click" 
    dur="10s" 
    calcMode="linear"
    repeatDur="indefinite" >
      <mpath xlink:href="#trace"/>
    </animateMotion>
</svg>

当经过圣诞树后面的一段路线时，如何伪装雪人？

可以为标签列表中的任何标签给出答案，但优先考虑 CSS、SVG 标签的答案。

更新 17.01.2025

已经有一个很好的答案，但从评论来看，还有很多关于如何以其他方式解决这个问题的想法。朋友们，发表你的答案，将言语付诸行动吧！

  • 比赛的获胜者将是最完全满足比赛条件的答案。

  • 答案的优美性和独创性。这当然是主观的，但谁付钱谁说了算。

  • 最多赞同

恭喜 De.Minov 比赛的获胜者！

javascript
Martin Hope
Alexandr_TT
Asked: 2024-12-26 18:46:31 +0000 UTC
  • 25

恭喜 NG 2025 比赛 NNL993 的获胜者

竞赛序言及条件：
新年实际上是每个人庆祝的唯一节日。他们送礼物，玩得开心，祝贺每个人，甚至是那些很长时间没有联系的人，当然还有许愿。 ***无论如何，让我们一起庆祝 2024-2025 年新年吧！***
往届 NG 比赛链接：

введите сюда описание изображения

主题列表：

  • 标题动画 2025 年新年快乐！
  • 弗罗斯特神父、雪少女的形象
  • 新年树：圣诞树装饰品、花环
  • 星空的图像、动画
  • 雪花、降雪的动画
  • 烟花、鞭炮

附加材料：

  • 带人字形的背景图像

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>  
</svg>

  • 圣诞树+雪人

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
             <!-- Елочка -->
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>  
           <!-- Снеговик -->
 <image  id="Snowman" transform="translate(950 720) scale(1 1)" x="0" xlink:href="https://isstatic.askoverflow.dev/mbefD.png" width="13%" height="13%"   />
</svg>

  • 圣诞树+圣诞老人

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
 
 <image id="Ded_Moroz" transform="translate(250 550) scale(1 1)" xlink:href="https://isstatic.askoverflow.dev/TYaVo.png" width="30%" height="30%" opacity="1">
</svg>

  • 雪少女

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
          <!-- Снегурочка -->
 <image id="Girl" transform="translate(850 670) scale(0.8 0.8)" xlink:href="https://isstatic.askoverflow.dev/RDght.png" width="30%" height="30%" opacity="1">
</svg>

  • 野兔与吉他

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
          <!-- Заяц -->
<image  id="zayka"  transform="translate(450 750) scale(0.75)"
             x="0" xlink:href=" https://isstatic.askoverflow.dev/3xzEW.png"
             
                /> 
</svg>

更新 01/02/2025

  • 2025年的象征+飞溅背景

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"
           width="100%" height="100%" viewBox="0 0 1680 1050" preserveAspectRatio="xMinYMin meet" >
             <!-- Фон -->
 <image  xlink:href="https://isstatic.askoverflow.dev/PBRad.jpg" height="100%" width="100%"/>    
          <!-- Змея - символ 2025 года -->
  <image  id="snake" x="250" y="350" transform="scale(2)" xlink:href="https://isstatic.askoverflow.dev/QkvLYcnZ.png"/>
</svg>

笔记

对受访者的要求：

  1. 不要在您的答案中一对一地复制别人的代码。

  2. 如果您使用其他人的代码，请务必标明来源和作者的链接以及您具体修改的内容。

要参加比赛，您需要有良好的假期心情，渴望做一些明亮、有趣和难忘的事情。渴望创造性地创造出属于你自己的东西，让你在接下来的一年里温暖而自豪地记住它。
新年比赛最重要的不是胜利，而是参与！

比赛获胜者

涵盖“主题列表”部分中的一个或多个主题的作品，以及以积分形式获得最多正面评价的作品，将受到认可。

javascript
Martin Hope
Alexandr_TT
Asked: 2024-12-21 20:50:10 +0000 UTC
  • 9

我有一个盒子，我想让它闪烁。

  • 它应该不停地闪烁
  • 它从白色闪烁并返回到原始颜色
  • 每个循环之间必须有一个“暂停”（颜色保持不变）
  • 解决方案只有css，没有js

代码片段中的代码满足所有条件。 30% 和 70% 关键帧用于每个周期之间的暂停，保持完全绿色。它们之间闪烁着白色。

但此示例使用硬编码颜色。是否可以简单地为对象（此处为主体）设置颜色？然后盒子会闪烁白色并返回到原来的颜色，无论盒子当时是什么颜色。
不幸的是，在关键帧中使用“继承”或“初始”会将其恢复为白色。

body {
  animation: blink 3s infinite ease-in-out;
  background-color: green;
}

@keyframes blink {
  30% {background-color: green;}
  50% {background-color: white;}
  70% {background-color: green;}
}

@Maze 问题的免费翻译使动画返回初始值（背景颜色）。

html
Martin Hope
Alexandr_TT
Asked: 2024-12-13 15:27:45 +0000 UTC
  • 17

祝贺比赛获胜者 Stanislav Volodarskiy！

他的解决方案很有趣、原创且非常专业。
他们100%满足比赛条件。

除了他的解决方案之外，还发布了几个非常可靠的答案。给他们打高分是公平的，但一场比赛只能产生一名获胜者。
因此，我呼吁潜在的赞助商：请分享你的萝卜并重新启动，这里有一个新的比赛。

我有一张军刀凸轮机构的照片。

在此输入图像描述

有*.gif 机构动画

在此输入图像描述

我为凸轮机构创建了一个 svg 代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 500 500">
                                                                          
     <!-- Шарнир -->
<path fill="grey" stroke="black" stroke-width="3" d="M344.3 197.6a49.6 49.6 0 0 1 34.4 13A57 57 0 0 1 396 251a54 54 0 0 1-17.4 36.8c-9 8.2-22 13.1-34.2 13a54.4 54.4 0 0 1-36.8-15.4A51.4 51.4 0 0 1 294 251a55.4 55.4 0 0 1 13.7-37.6 53.7 53.7 0 0 1 36.6-16z"/>
            <!-- Вертикальный стержень -->
<path fill="grey" stroke="black" stroke-width="3" d="M387.3 13.1h30v440.5h-30z"/>
                <!-- Ось кулачка -->
<path  fill="#626262" stroke="black" stroke-width="2" d="M344.3 223.5c8.9 0 18 5.5 23.7 12.3 3.4 4.1 4.9 10 4.5 15.3-.4 6.7-3.2 13.9-8.2 18.4a27 27 0 0 1-20 6.5c-7.1-.8-13.8-5.4-18.6-10.6a24.4 24.4 0 0 1-1-31.8c4.7-5.7 12.2-10.1 19.6-10z"/>

                 <!-- Кулачок -->
<path fill="grey" stroke="black" stroke-width="3" d="M41.3 153c32.7 0 78.5 3.3 117.6 7 35 3.2 69.9 6.8 104.3 13.2 16.8 3.1 33.3 7.7 49.8 12.2 13 3.5 43.8 11.3 38.7 11.6-20 1.4-39.1 7.2-48.7 22.3-20.3 31.8-.9 54.9-7 41.8-5.4-11.8-18.1-18-29-24.3-13.4-7.9-28.7-11.9-43.5-16.5-19-5.9-38.9-9.2-58.2-14.3-21.5-5.5-42.7-12-64.1-17.4-14-3.5-26.3-5.5-41.9-9.6a25 25 0 0 1-13.2-10.6c-3-4.4-10.1-15.3-4.8-15.3z"/>
             <!-- Цилиндр -->
<path fill="black" d="M377.5 54.3c3.8-.7 50.6-.4 50.6-.4l9.3 10.5v88.8h-66.6V64.4Z"/>
            <!-- Линия фаски -->
<path  stroke="white" d="m370.8 64 66.6.4"/>
              <!-- Верхний рычаг -->
<path fill="grey" stroke="black" stroke-width="3" d="M21.2 153c-3.1 0 1.1-6.2 2.6-9 1.4-2.4 3-5.7 5.9-6.3a17587 17587 0 0 1 341-65.7v81H21.3z"/>

</svg>

如何根据给定的.gif 文件创建凸轮机构的动画？

更新


解决问题时出现问题时提供额外数据。
希望这有帮助。

Inkscape 源代码，创建了该机制的静态 SVG 文件。
SVG 画布大小 500x500 px
可以通过在矢量编辑器中运行 inkscape 源代码来获取部件的尺寸 下面的代码

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="500"
   height="500"
   viewBox="0 0 500 500"
   version="1.1"
   id="svg4"
   sodipodi:docname="Заготовка-ink2.svg"
   inkscape:version="0.92.3 (2405546, 2018-03-11)">
  <metadata
     id="metadata10">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs8" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1440"
     inkscape:window-height="837"
     id="namedview6"
     showgrid="false"
     inkscape:zoom="0.944"
     inkscape:cx="295.12041"
     inkscape:cy="242.72973"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg4"
     showguides="true"
     inkscape:guide-bbox="true">
    <sodipodi:guide
       position="436.69836,486.88497"
       orientation="0,1"
       id="guide4520"
       inkscape:locked="false" />
    <sodipodi:guide
       position="387.26081,395.5004"
       orientation="1,0"
       id="guide4522"
       inkscape:locked="false" />
    <sodipodi:guide
       position="417.22296,388.75892"
       orientation="1,0"
       id="guide4524"
       inkscape:locked="false" />
    <sodipodi:guide
       position="448.68322,46.441335"
       orientation="0,1"
       id="guide4526"
       inkscape:locked="false" />
    <sodipodi:guide
       position="370.78163,381.26838"
       orientation="1,0"
       id="guide4532"
       inkscape:locked="false" />
    <sodipodi:guide
       position="437.44742,370.03257"
       orientation="1,0"
       id="guide4534"
       inkscape:locked="false" />
    <sodipodi:guide
       position="489.88118,471.15484"
       orientation="0,1"
       id="guide4536"
       inkscape:locked="false" />
    <sodipodi:guide
       position="489.13213,416.47391"
       orientation="0,1"
       id="guide4538"
       inkscape:locked="false" />
    <sodipodi:guide
       position="411.97959,435.94931"
       orientation="0,1"
       id="guide4546"
       inkscape:locked="false" />
    <sodipodi:guide
       position="288.66525,346.92797"
       orientation="0,1"
       id="guide4550"
       inkscape:locked="false" />
    <sodipodi:guide
       position="344.27966,512.1822"
       orientation="1,0"
       id="guide4554"
       inkscape:locked="false" />
    <sodipodi:guide
       position="370.78163,248.94068"
       orientation="0,1"
       id="guide4556"
       inkscape:locked="false" />
  </sodipodi:namedview>
  <image
     
  <path
     style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 387.26081,13.11503 h 29.96215 v 440.44364 h -17.97729 -11.98486 z"
     id="path4528"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#0000f7;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 387.26081,13.11503 h 29.96215 v 440.44364 h -29.96215 z"
     id="path4530"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#e50000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 377.52311,54.312992 c 3.74527,-0.749054 50.56113,-0.374527 50.56113,-0.374527 l 9.36318,10.486753 V 153.18809 H 370.78163 V 64.425218 Z"
     id="path4544"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#570400;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 370.78163,64.05069 66.66579,0.374528"
     id="path4548"
     inkscape:connector-curvature="0" />
  <path
     style="fill:none;stroke:#008800;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 21.186441,153.07203 c -3.12854,0 1.110117,-6.27995 2.648305,-9.00423 1.413084,-2.50271 3.015439,-5.75628 5.826271,-6.35594 C 135.51425,115.12916 370.78163,72.033898 370.78163,72.033898 v 81.038132 c 0,0 -212.74111,0 -349.595189,0 z"
     id="path4552"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="sasccs" />
  <path
     style="fill:none;stroke:#0000e7;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 344.27966,223.51695 c 8.90907,0.0198 18.05228,5.44187 23.72125,12.31462 3.36808,4.08327 4.85373,9.94633 4.50212,15.22775 -0.44642,6.70562 -3.23009,13.91363 -8.22867,18.40572 -5.21172,4.68364 -13.02457,7.20658 -19.9947,6.48835 -7.07962,-0.72951 -13.76582,-5.31323 -18.53813,-10.59322 -3.49791,-3.87002 -6.03275,-9.09431 -6.35594,-14.30085 -0.37718,-6.07621 1.39653,-12.80421 5.29661,-17.47881 4.70441,-5.63868 12.25403,-10.07987 19.59746,-10.06356 z"
     id="path4558"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="aaaaaaaaa" />
  <path
     style="fill:none;stroke:#0000ed;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 344.27966,197.56356 c 12.26035,-0.30456 25.5788,4.48545 34.42797,12.97669 10.5885,10.16022 17.51589,25.8475 17.21398,40.51907 -0.2794,13.57787 -7.48027,27.60038 -17.4599,36.81145 -8.95578,8.26607 -21.9962,13.17457 -34.18205,12.97669 -13.2941,-0.21588 -27.5112,-5.85832 -36.81144,-15.36017 -8.6229,-8.80982 -13.36567,-22.10127 -13.50636,-34.42797 -0.15236,-13.3485 4.61476,-27.89174 13.77119,-37.60593 9.11148,-9.66649 23.26688,-15.55995 36.54661,-15.88983 z"
     id="path4560"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="aaaaaaaaa" />
  <path
     style="fill:none;stroke:#00aa40;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     d="m 41.313559,153.07203 c 32.676369,0 78.490031,3.2645 117.584751,6.8856 34.91059,3.23355 69.86925,6.85792 104.34322,13.24152 16.80002,3.11088 33.30494,7.68524 49.78813,12.18221 12.98636,3.54296 43.73855,11.29999 38.66526,11.65254 -19.95701,1.38685 -39.13749,7.18503 -48.72882,22.24576 -20.23867,31.77966 -0.83862,54.89455 -6.88559,41.84322 -5.46997,-11.80596 -18.20255,-17.97596 -29.13136,-24.3644 -13.36198,-7.81076 -28.65095,-11.82981 -43.4322,-16.4195 -19.0979,-5.93004 -38.9043,-9.28613 -58.26271,-14.30084 -21.4357,-5.55283 -42.60775,-12.10487 -64.08899,-17.47882 -13.877535,-3.47173 -26.30999,-5.43823 -41.843216,-9.5339 -5.465675,-1.44114 -10.056956,-5.92321 -13.241525,-10.59322 -3.020329,-4.42916 -10.127906,-15.36017 -4.76695,-15.36017 z"
     id="path4562"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="saaasssaaaasas" />
</svg>

矢量编辑器的屏幕截图

在此输入图像描述

笔记：

设计凸轮旋转动画时，请注意旋转的不均匀性：大旋转角度与小角度交替！

相关主题：

  1. 曲柄机构的动画
  2. 如何制作凸轮机构的动画？

比赛将在截止日期后的最后几个小时内结束。
还有很多时间，继续，寻找解决方案！

javascript
Martin Hope
Alexandr_TT
Asked: 2024-12-11 23:37:33 +0000 UTC
  • 8

我有下面的 SVG。我将所有路径合并为一条。
但我的最终 SVG 被裁剪了。有人可以帮忙吗？
附上前后截图：

曾是：

<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136Z" fill="black"/>
<path d="M14.3166 17.0235C13.7301 17.5381 12.9832 17.8359 12.2098 17.8359C10.4499 17.8359 9.03624 16.3872 9.03624 14.6132C9.03624 13.6114 9.48937 12.6767 10.2764 12.0543C10.6498 11.7565 10.7165 11.2149 10.4232 10.8356C10.13 10.4564 9.59668 10.3887 9.22323 10.6865C8.00967 11.6343 7.31641 13.056 7.31641 14.5994C7.31641 17.3344 9.50284 19.5555 12.1967 19.5555C13.3832 19.5555 14.5165 19.1223 15.4233 18.3231C15.7832 18.0115 15.8098 17.4699 15.5035 17.1044C15.2098 16.7527 14.6635 16.7252 14.3166 17.0235Z" fill="black"/>
<path d="M13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z" fill="black"/>
</svg>

变成：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   x="0px" y="0px"
   width="24px"
   height="24px"
   viewBox="0 0 24 24"
   id="companion-24">
   
<!-- Объединены все paths -->
<path fill="#000000" fill-rule="evenodd" clip-rule="evenodd" d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136ZM14.3166 17.0235C13.7301 17.5381 12.9832 17.8359 12.2098 17.8359C10.4499 17.8359 9.03624 16.3872 9.03624 14.6132C9.03624 13.6114 9.48937 12.6767 10.2764 12.0543C10.6498 11.7565 10.7165 11.2149 10.4232 10.8356C10.13 10.4564 9.59668 10.3887 9.22323 10.6865C8.00967 11.6343 7.31641 13.056 7.31641 14.5994C7.31641 17.3344 9.50284 19.5555 12.1967 19.5555C13.3832 19.5555 14.5165 19.1223 15.4233 18.3231C15.7832 18.0115 15.8098 17.4699 15.5035 17.1044C15.2098 16.7527 14.6635 16.7252 14.3166 17.0235ZM13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063ZM7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z"/>
</svg>

在此输入图像描述

问题的免费翻译为什么 SVG 在合并路径后会被剪切？来自成员 @Dolly。

javascript
Martin Hope
Alexandr_TT
Asked: 2024-02-13 23:15:36 +0000 UTC
  • 8

在此输入图像描述

我正在尝试创建菜单箭头（又名面包屑），如图所示。我查看了大量的解决方案хлебных крошек，但没有一个可以使箭头轮廓圆角，所以我决定使用clip-path。

我的代码：

.box {
      width: 425px;
      height: 90px;
      background-color: #dfdfdf;
      color: white;
      clip-path: polygon(90% 10%, 100% 50%, 90% 90%, 0% 90%, 10% 50%, 0% 10%);
      position: relative;
    }
<div class="box"></div>

我尝试使用本主题中的方法，但在这种情况下，当我们组合两个路径来创建边框时，SVG 圆角创建器不适用于内部路径。如果我们嵌套它们以将 SVG 应用到内部，它们将不适合。

如何为箭头轮廓制作圆角？

html
Martin Hope
Alexandr_TT
Asked: 2023-12-01 00:36:08 +0000 UTC
  • 6

我正在使用 Composer endroid/qr-code php 包生成 QR 码。

这太酷了，这是我用于生成 SVG 的 PHP 设置。

// 创建二维码

$qrCode = QrCode::create($url)
            ->setEncoding(new Encoding('UTF-8'))
            ->setErrorCorrectionLevel(new ErrorCorrectionLevelLow())
            ->setSize(210)
            ->setMargin(0)
            ->setRoundBlockSizeMode(new RoundBlockSizeModeMargin())
            ->setForegroundColor(new Color(0,0,0))
            ->setBackgroundColor(new Color(255,255,255));

它以 SVG 格式输出这个很棒的 QR 代码...（为了演示而稍微缩小）

运行下面的代码片段以查看在 HTML 中运行的 SVG 代码...

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="210px" height="210px" viewBox="0 0 210 210">
  <defs>
    <rect id="block" width="30" height="30" fill="#000000" />
  </defs>
  <rect x="0" y="0" width="210" height="210" fill="#ffffff" />
  <use x="0" y="0" href="#block"></use>
  <use x="30" y="0" href="#block"></use>
  <use x="60" y="0" href="#block"></use>
  <use x="90" y="0" href="#block"></use>
  <use x="120" y="0" href="#block"></use>
  <use x="150" y="0" href="#block"></use>
  <use x="180" y="0" href="#block"></use>
  <use x="0" y="30" href="#block"></use>
  <use x="180" y="30" href="#block"></use>
  <use x="0" y="60" href="#block"></use>
  <use x="60" y="60" href="#block"></use>
  <use x="90" y="60" href="#block"></use>
  <use x="120" y="60" href="#block"></use>
  <use x="180" y="60" href="#block"></use>
  <use x="0" y="90" href="#block"></use>
  <use x="60" y="90" href="#block"></use>
  <use x="90" y="90" href="#block"></use>
  <use x="120" y="90" href="#block"></use>
  <use x="180" y="90" href="#block"></use>
  <use x="0" y="120" href="#block"></use>
  <use x="60" y="120" href="#block"></use>
  <use x="90" y="120" href="#block"></use>
  <use x="120" y="120" href="#block"></use>
  <use x="180" y="120" href="#block"></use>
  <use x="0" y="150" href="#block"></use>
  <use x="180" y="150" href="#block"></use>
  <use x="0" y="180" href="#block"></use>
  <use x="30" y="180" href="#block"></use>
  <use x="60" y="180" href="#block"></use>
  <use x="90" y="180" href="#block"></use>
  <use x="120" y="180" href="#block"></use>
  <use x="150" y="180" href="#block"></use>
  <use x="180" y="180" href="#block"></use>
</svg>

但我没有尝试过在 Illustrator 中打开我的二维码。

这段代码在我的预览中工作IDE，预览Mac，它在 html 页面上使用时可以正常打开Chrome并显示良好，但不能在Illustrator.
当我在 Illustrator 中打开它时，它只显示一个白色框。

为什么此 SVG 代码无法在 Adob​​e Illustrator 中运行？
如何修复 SVG 代码以使其在 Illustrator 中工作？

我使用的是最新版本的 Adob​​e Illustrator 28.0。

来自成员 @joshmoto的问题Cannot open generated QR code SVG in Adob​​e Illustrator的免费翻译。

php
Martin Hope
Alexandr_TT
Asked: 2023-11-28 02:09:55 +0000 UTC
  • 10

因此，我有一个标题屏幕“动画”，其中标题标题位于全屏页面的中心，当我向下滚动时，它会变小并停留在页面顶部。这是一个具有预期行为的工作示例，我从中删除了所有不必要的代码以保持最少：

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
    
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});
.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both;
}
#inside {
    width: 100%;
    height: 100vh;
    background-color: lightcoral;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header {
    height: 90px;
    top: 0;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
#title {
    width: 100%;
    color: #fff;
    transform: scale(2);
}
#content {
    height: 1000px;
    background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>  
    <div class="wrapper">
        <div id="inside">
            <div id="header">
                <h1 id="title">Title</h1>
            </div>
        </div>
    <div id="content"></div>
</body>

接下来是相同的片段，但添加了一个：我应用了一个过滤器，在我看来，这纯粹是装饰性的：filter: Brightness(1.3);。

正如您在下面看到的，当您滚动“动画”一半时，标题就会消失。当您检查该元素时，它仍然保留其所有属性，但不知何故它不在那里。同样的事情发生在 Firefox 和 Chrome 中，我不知道为什么。
如果有人能发布一个应用了过滤器的工作片段并解释为什么它之前不起作用，我将非常感激。

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
    
    if (windowS < windowH-header) {
        $("#title").css("transform", "scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform", "translateY(0)");
        $("#inside, #content").css({
            "position": "static",
            "margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed",
            "margin-top": -windowH+header
        });
        $("#content").css("margin-top", windowH);
    }
  
    $("#header").css("position", windowS > (windowH-header)/2 ? "fixed" :"static");
});
.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both;
}
#inside {
    width: 100%;
    height: 100vh;
    background-color: lightcoral;
    filter: brightness(1.3);        /*<<<<<<<<<<<<<<<<*/
    display: flex;
    align-items: center;
    justify-content: center;
}
#header {
    height: 90px;
    top: 0;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
#title {
    width: 100%;
    color: #fff;
    transform: scale(2);
}
#content {
    height: 1000px;
    background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>  
    <div class="wrapper">
        <div id="inside">
            <div id="header">
                <h1 id="title">Title</h1>
            </div>
        </div>
    <div id="content"></div>
</body>

问题的免费翻译为什么将 CSS 过滤器应用于父元素会破坏子元素的定位？来自成员 @leonheess。

javascript
Martin Hope
Alexandr_TT
Asked: 2023-10-30 20:49:13 +0000 UTC
  • 6

我正在尝试创建无限重复的“草稿”文本。这将用于用水印填充页面。（我使用 SVG 而不是背景图像，因为我也需要它在打印模式下显示）。

我到处都能看到带有重复形状的 SVG 示例。例如这个：

<svg width="100%" height="100%" xmlns='http://www.w3.org/2000/svg' style="border: 1px solid red">
    <defs>
        <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse">
            <circle cx="20" cy="20" r="20" fill="#64bee3" />
        </pattern>
    </defs>
    <rect x="10" y="10" width="100%" height="100%" stroke="#333333" stroke-width="2" fill="url(#basicPattern)" />
</svg>

但是当我尝试用 替换模板中的形状时<text>，它不起作用（svg 中什么也没有出现）。

如何创建以一定间隔无限重复的文本？

问题的免费翻译如何在 SVG 中制作重复文本？来自成员 @Primordial_Hamster。

html
Martin Hope
Alexandr_TT
Asked: 2022-06-27 00:08:07 +0000 UTC
  • 1

这就是我检测 SVG 行点击的方式：

window.onmousedown = (e) => {
    if (e.target.tagName == 'line') {
        alert();  // do something with e.target
    }
}
svg line:hover { cursor: pointer; }
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" id="svg">
<line x1="320" y1="160" x2="140" y2="00" stroke="black" stroke-width="2"></line>
<line x1="140" y1="00" x2="180" y2="360" stroke="black" stroke-width="2"></line>
<line x1="180" y1="360" x2="400" y2="260" stroke="black" stroke-width="2"></line>
<line x1="00" y1="140" x2="280" y2="60" stroke="black" stroke-width="2"></line>
</svg>

这仅在鼠标光标正好在线时才有效，这并不容易，所以它是糟糕的用户体验。

如何从 Javascript 中检测对 SVG 线的点击，即使不是完全在线，但距离 <= 3 像素？

问题的免费翻译Detect a click on a SVG line even at 3 pixel by @Basj。

javascript css
Martin Hope
Alexandr_TT
Asked: 2022-06-20 16:17:11 +0000 UTC
  • 3

我需要在 2D 中建模一个旋转箭头。它应该与旋转的蓝色箭头同步。
我从 开始keySplines，用红色箭头显示，当使用
http://franzheidl.github.io/keysplines/查看时，它给出了一个很好的象限

<!DOCTYPE html>
<body>

<svg width="800" height="400" viewBox="0 0 800 400" version="1.1" id="svg5">

  <defs>
     <g id="layer1a">
      <path id="vect1a"
        style="stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="m 0,0 h -10 v -80 h -10 l 20,-20 20,20 h -10 v 80 z" />
      <animateTransform additive=sum attributeName="transform" type="rotate"
       begin="0s" dur="12s"
       from="0 0 0" to="360 0 0"
       repeatCount="2.125" fill="freeze" />
    </g>
    <g id="line1">
      <line x1="0" y1="0" x2="800" y2="0">
    </g>
  </defs>
 
  <g id="layer3" transform="translate(0,200)">
    <path
      style="fill:#ffffff;stroke:#0000ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
      d="m 0,0 h 800"
      id="line"
      />
  </g>
  <use href="#layer1a" style="fill:#0000ff" transform="translate(150,200)" />
  <use href="#line1" style="stroke:rgb(255,0,0);stroke-width:2" transform="translate(0,200)">
    <animateTransform
        additive="sum"
        id="line1at0"
        attributeName="transform"
        type="translate"
        calcMode="spline"
        begin="0s"
        dur="12s"
        values="0 -100 ; 0 0 ; 0 100 ;0 0 ; 0 -100"
        keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" 
        keySplines="0.5 0 1 .5 ; 0 0.5 0.5 1 ; 0.5 0 1 .5 ; 0 0.5 0.5 1"
        repeatCount="2.125"
        fill="freeze" />
  </use>
  <use xlink:href="#vect1a" style="fill:#ff0000" transform="translate(300,200)" >
      <animateTransform
        additive="sum"
        id="arrow1at0"
        attributeName="transform"
        type="scale"
        calcMode="spline"
        begin="0s"
        dur="12s"
        values="1 1 ; 1 0 ; 1 -1 ; 1 0 ; 1 1"
        keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" 
        keySplines="0.5 0 1 .5 ; 0 0.5 0.5 1 ; 0.5 0 1 .5 ; 0 0.5 0.5 1"
        repeatCount="2.125"
        fill="freeze" />
  </use>
  <use href="#line1" style="stroke:rgb(255,0,0);stroke-width:2" transform="translate(0,200)">
    <animateTransform
        additive="sum"
        id="line1at0"
        attributeName="transform"
        type="translate"
        calcMode="spline"
        begin="0s"
        dur="12s"
        values="0 -100 ; 0 0 ; 0 100 ;0 0 ; 0 -100"
        keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" 
        keySplines="0.5 0 1 .5 ; 0 0.5 0.5 1 ; 0.5 0 1 .5 ; 0 0.5 0.5 1"
        repeatCount="2.125"
        fill="freeze" />
  </use>
  <use xlink:href="#vect1a" style="fill:#00ff00" transform="translate(450,200)" >
      <animateTransform
        additive="sum"
        id="arrow1bt0"
        attributeName="transform"
        type="scale"
        calcMode="spline"
        begin="0s"
        dur="12s"
        values="1 1 ; 1 0 ; 1 -1 ; 1 0 ; 1 1"
        keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" 
        keySplines="1 .75 .25 0 ; 0 .25 .75 1 ; 1 .75 .25 0 ; 0 .25 .75 1"
        repeatCount="2.125"
        fill="freeze" />
  </use>
  <use href="#line1" style="stroke:rgb(0,255,0);stroke-width:2" transform="translate(0,200)">
    <animateTransform
        additive="sum"
        id="line1bt0"
        attributeName="transform"
        type="translate"
        calcMode="spline"
        begin="0s"
        dur="12s"
        values="0 -100 ; 0 0 ; 0 100 ;0 0 ; 0 -100"
        keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" 
        keySplines="1 .75 .25 0 ; 0 .25 .75 1 ; 1 .75 .25 0 ; 0 .25 .75 1"
        repeatCount="2.125"
        fill="freeze" />
  </use>
 
</svg>

</body>
</html>

有没有人对如何设置 keySplines 以获得所需的结果有任何想法？

SVG animateTransform 缩放 keySplines的松散翻译，以匹配贡献者 @Peter Hill的旋转矢量问题的 Y 分量。

javascript html
Martin Hope
Alexandr_TT
Asked: 2022-09-01 22:11:36 +0000 UTC
  • 2

我正在尝试在画布上创建一个三角形。但我不确定哪一边是 x1、y1、x2、y2...等。我将我的三角形与本网站上列出的三角形相匹配。但我看到了不同的结果。

下面是我的代码：

 var canvasElement = document.querySelector("#canvas");
    var ctx = canvasElement.getContext("2d");

    // Sides: a = 30   b = 30   c = 59

    var triangle = {
        x1: 30, 
        y1: 0, 
        x2: 0, 
        y2: 59, 
        x3: 30, 
        y3: 59 
    }

    ctx.strokeStyle = 'red';
    
    ctx.beginPath();
    ctx.moveTo(triangle.x1, triangle.y1);
    ctx.lineTo(triangle.x2, triangle.y2);
    ctx.lineTo(triangle.x3, triangle.y3);
    ctx.lineTo(triangle.x1, triangle.y1);
    ctx.closePath();
    ctx.stroke();
<canvas id="canvas" width="300" height="300"></canvas>

问题的免费翻译如何在Javascript中以编程方式在画布上绘制三角形？来自 @Faiz。

javascript
Martin Hope
Alexandr_TT
Asked: 2022-07-23 00:43:57 +0000 UTC
  • 3

我的作品集有一个黑色徽标，我想在深色模式下将其切换为白色。https://www.paulinerouger.com/

我试着做：

  • 使用 CSS 变量：
<img class="nav_logo" src="assets/img/PR_logo.png" alt="original logo" />

body {
  --nav_logo: url(PR_logo.png) no-repeat;

}

body[data-theme="dark"] {
  --nav_logo: url(PR_logo_white.png) no-repeat;
}

.nav_logo {
    background: var(--nav_logo);
  }
  • 使用 SVG 制作
<img class="nav_logo" src="assets/img/PR_logo.svg" id="svg" alt="PR Logo">


.nav_logo {
    fill: currentColor;
}

不幸的是，以上都没有奏效。
有什么解决问题的建议吗？

@PaulineTW对深色模式下 Switch 徽标颜色的 松散翻译问题。

javascript
Martin Hope
Alexandr_TT
Asked: 2022-05-29 17:03:18 +0000 UTC
  • 34

我们在 RuSO 每年都会组织新年比赛：

在此处输入图像描述

今年，我们选择了风格化为印刷电路板的圣诞树图像，这不是随意选择您喜欢的图片，因为我们的资源上有人参与了贝加尔湖处理器和其他电子设备的开发。

可视化脚本：

  1. 圣诞树图像
  2. 圣诞树上的花环动画
  3. 圣诞树上星星的动画
  4. 飘落的雪花动画
  5. 霜神父与雪少女的形象
  6. 雪人动画
  7. 文字动画：2022年新年快乐！

获胜者选择标准

  1. 要赢得新年比赛，您必须至少实现可视化脚本中指定的动画之一。如果所有响应仅实现一个场景项，则此条件有效。在这种情况下，选择得票最多的答案。upvote

  2. 如果有答案实现了场景的几个点，则根据解决方案的质量（情绪积极，营造节日气氛，新年气氛），完成点数最多的答案将获得优势。情况下，选择得票最多的答案upvote

祝贺 NG 2022 竞赛的获胜者@Nikolya Shirshov！

javascript
Martin Hope
Alexandr_TT
Asked: 2022-05-15 19:45:57 +0000 UTC
  • 7

如何在<canvas>没有问题的情况下做一个圆圈

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
ctx.strokeStyle = "#1CB3FE"
ctx.lineWidth = 10;
ctx.stroke();
<canvas width="400" height="400" </canvas>

问题 - 创建一个不断增长的进度条线的动画，即在canvasCSS 和 SVG 属性中找到类似物， stroke-dasharray以及stroke-dashoffset

问题：

如何重复canvas显示完成百分比的进度条动画：

在此处输入图像描述

svg {
  height: 90vh;
  margin: auto;
  display: block;
}

path {
  stroke-linecap: round;
  stroke-width: 6;
}

path.grey {
  stroke: #e7e7e8;
}

path.purple {
  stroke: url(#gradient);
  stroke-dasharray: 198;
  stroke-dashoffset: 198;
  animation: dash 3s ease-out forwards;
}

path.white {
  stroke: #ffffff;
  stroke-dasharray: 0px, 198px;
  stroke-dashoffset: 198;
  stroke-width: 3.5px;
  animation: dash 3s ease-out forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1; 
  }
}
<svg viewbox="0 0 100 100">
      <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
           <stop offset="0%" stop-color="#56c4fb" />
           <stop offset="100%" stop-color="#0baeff" />
       </linearGradient>
       <path class="grey" d="M30,90 A40,40 0 1,1 80,90" fill='none' />
       <path id="purple" fill='none' class="purple" d="M30,90 A40,40 0 1,1 80,90" />
       <path id="white" fill='none' class="white" d="M30,90 A40,40 0 1,1 80,90" />
 </svg>

javascript
Martin Hope
Alexandr_TT
Asked: 2022-05-14 23:48:00 +0000 UTC
  • 4

坐标网格对布局有很大帮助。允许您查看某些元素在创建和相对于边界定位时的外观。

对于 SVG，开发了这样一个自适应坐标网格：

function changeHeight() {
  itrX.addEventListener("input",()=>{svg.setAttribute("height",itrX.value)});
    var x = document.getElementById("itrX").value;
    document.getElementById("infoX").innerHTML = "SVG height: " + x +"px";
}
  function changeWidth() {
  itrY.addEventListener("input",()=>{svg.setAttribute("width",itrY.value)});
    var x = document.getElementById("itrY").value;
    document.getElementById("infoY").innerHTML = "SVG width: " + x +"px";
}
<style>
text {
font-size:20px;
fill:black;
}
p {
display:inline-block;
font-weight:bold;
margin: 1em ;
}
</style>
<p id="infoX" ></p>
<p id="infoY" ></p>
<div>
 <span><input id="itrX" type="range" min="10" max="1000" value="1000" oninput="changeHeight()"/></span>
  <span><input id="itrY" type="range" min="10" max="1000" value="1000" oninput="changeWidth()"/></span>
</div>

 
 <svg id="svg" width="1000" height="1000" viewBox="-20 -20 1050 1050" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" style="border:2px solid purple">
   <defs> 
    
      <pattern id="p10" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
      </pattern>
      <pattern id="p100" width="100" height="100" patternUnits="userSpaceOnUse">
        <rect width="100" height="100" fill="url(#p10)"/>
        <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
      </pattern>
    </defs>
    <rect width="1000" height="1000" fill="url(#p100)" />
    
      <circle cx="500" cy="500" r="5" fill="black" />
      
     <!-- Вертикальный блок цифр -->

      <text x="-15" y="0">0,0</text> 
       <text x="-20" y="100" >100</text> 
        <text x="-20" y="200">200</text> 
         <text x="-20" y="300">300</text> 
          <text x="-20" y="400">400</text> 
           <text x="-20" y="500">500</text> 
          <text x="-20" y="600">600</text> 
         <text x="-20" y="700">700</text> 
        <text x="-20" y="800">800</text>
       <text x="-20" y="900">900</text> 
      <text x="-20" y="1000">1000</text> 
          <!-- Горизонтальный блок --> 
     <text x="100" y="-5" >100</text> 
       <text x="200" y="-5" >200</text> 
        <text x="300" y="-5">300</text> 
         <text x="400" y="-5">400</text> 
          <text x="500" y="-5">500</text>    
         <text x="600" y="-5">600</text> 
         <text x="700" y="-5">700</text> 
        <text x="800" y="-5">800</text>
       <text x="900" y="-5">900</text>  
      <text x="990" y="-5">1000</text>   
      <!-- Ракета      -->
      <g transform="scale(1)" fill="purple">
      <path  d="m308.167 241.52c0-28.766-23.403-52.169-52.17-52.169s-52.17 23.403-52.17 52.169c0 28.767 23.403 52.17 52.17 52.17s52.17-23.404 52.17-52.17zm-52.169 22.169c-12.225 0-22.17-9.945-22.17-22.17 0-12.224 9.945-22.169 22.17-22.169s22.17 9.945 22.17 22.169c-.001 12.225-9.946 22.17-22.17 22.17z"/>
  <path   d="m425.684 424.352v-132.322l-51.65-32.948c.615-14.332.261-28.762-1.117-43.191-7.162-74.973-41.384-144.771-96.362-196.535l-20.557-19.356-20.558 19.356c-54.978 51.765-89.2 121.563-96.362 196.535-1.378 14.429-1.732 28.859-1.117 43.191l-51.65 32.948v132.321l90.003-28.282c3.744 6.784 7.752 13.436 12.017 19.945v62.315h30v-48.333h22.667v23.252h30v-23.252h22.667v48.333h30v-62.315c4.265-6.508 8.273-13.161 12.017-19.945zm-30-115.874v75.001l-46.66-14.662c10.468-24.35 17.778-49.975 21.762-76.222zm-139.694-267.28c27.301 25.706 48.392 55.971 63.081 88.684h-126.153c14.687-32.713 35.775-62.979 63.072-88.684zm-139.679 342.281v-75.001l24.898-15.883c3.983 26.247 11.293 51.872 21.762 76.222zm124.687-10.983v27.499h-27.316c-47.563-72.299-57.394-161.126-32.242-240.114h149.112c25.156 78.987 15.325 167.815-32.238 240.114h-27.316v-27.499z"/>
   <path  d="m240.998 483.495h30v28.5h-30z"/> 
   </g>
  </svg>

CSS，JS中坐标网格的其他选项：here和here

需要一个<canvas>具有缩放可能性的变体width和height

沿着网格的边缘有数字也是非常可取的，如下图所示：

在此处输入图像描述

我将不胜感激想法和解决方案。

javascript