Alexandr_TT提出的问题

Alexandr_TT

Asked: 2024-12-26 18:46:31 +0800 CST

2024-2025年新年比赛！

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>

笔记

对受访者的要求：

不要在您的答案中一对一地复制别人的代码。
如果您使用其他人的代码，请务必标明来源和作者的链接以及您具体修改的内容。

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

比赛获胜者

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

Alexandr_TT

Asked: 2024-12-21 20:50:10 +0800 CST

强制动画返回其原始值（背景颜色）

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 问题的免费翻译使动画返回初始值（背景颜色）。}

Alexandr_TT

Asked: 2024-12-13 15:27:45 +0800 CST

如何制作军刀凸轮机构的动画？

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>

矢量编辑器的屏幕截图

笔记：

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

相关主题：

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

Alexandr_TT

Asked: 2024-12-11 23:37:33 +0800 CST

为什么SVG合并路径后会被切断？

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。}

Alexandr_TT

Asked: 2024-02-13 23:15:36 +0800 CST

如何在箭头上制作圆角

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 应用到内部，它们将不适合。

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

Alexandr_TT

Asked: 2023-12-01 00:36:08 +0800 CST

无法在 Adobe Illustrator 中打开生成的 SVG QR 代码

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 代码无法在 Adobe Illustrator 中运行？
如何修复 SVG 代码以使其在 Illustrator 中工作？

我使用的是最新版本的 Adobe Illustrator 28.0。

_{来自成员 @joshmoto的问题Cannot open generated QR code SVG in Adobe Illustrator的免费翻译。}

Alexandr_TT

Asked: 2023-11-28 02:09:55 +0800 CST

为什么将 CSS 过滤器应用于父元素会破坏子元素的定位？

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。}

Alexandr_TT

Asked: 2023-10-30 20:49:13 +0800 CST

如何在SVG中制作重复文本？

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。}

Alexandr_TT

Asked: 2022-06-27 00:08:07 +0800 CST

检测距离 <= 3 像素的 SVG 行的点击

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。}

Alexandr_TT

Asked: 2022-06-20 16:17:11 +0800 CST

SVG animateTransform 缩放 keySplines 以适应旋转矢量的 Y 分量（箭头）

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 分量。}

Alexandr_TT

Asked: 2022-09-01 22:11:36 +0800 CST

如何在 Javascript 中以编程方式在画布上绘制三角形？

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。}

Alexandr_TT

Asked: 2022-07-23 00:43:57 +0800 CST

将徽标颜色切换为深色模式的问题

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 徽标颜色的松散翻译问题。}

Alexandr_TT

Asked: 2022-05-29 17:03:18 +0800 CST

2022年新年比赛！

34

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

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

可视化脚本：

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

获胜者选择标准

要赢得新年比赛，您必须至少实现可视化脚本中指定的动画之一。如果所有响应仅实现一个场景项，则此条件有效。在这种情况下，选择得票最多的答案。upvote
如果有答案实现了场景的几个点，则根据解决方案的质量（情绪积极，营造节日气氛，新年气氛），完成点数最多的答案将获得优势。情况下，选择得票最多的答案upvote

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

Alexandr_TT

Asked: 2022-05-15 19:45:57 +0800 CST

如何使用 Canvas 制作圆形进度条？

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>

Alexandr_TT

Asked: 2022-05-14 23:48:00 +0800 CST

使用 <canvas> 创建网格

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

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

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

Alexandr_TT

Asked: 2022-05-13 23:11:35 +0800 CST

如何使用 HTML Canvas 绘制圆角矩形？

2

HTML Canvas 提供了绘制矩形fillRect()和的方法strokeRect()，但我找不到创建圆角矩形的方法。我怎样才能做到这一点？

_{自由翻译问题How to draw a rounded rectangle using HTML Canvas? @ DNB5brims。}

Alexandr_TT

Asked: 2022-05-07 01:36:07 +0800 CST

用鼠标在 HTML5 画布上绘图

3

我想用鼠标在 HTML 画布上绘图（例如，绘制标题、绘制名称等）

我该如何实施？

_{使用 @MartinJoo提出的鼠标问题对 HTML5 Canvas 上的 Draw 进行了松散的翻译。}

Alexandr_TT

Asked: 2022-05-02 02:23:46 +0800 CST

绘制鼠标轨迹时如何影响：悬停在画布后面的元素

2

我有 8 列flex-box悬停在它们上面会显示图像。我想在鼠标在屏幕上移动时留下痕迹，所以我曾经onmousemove在画布上画线。但是，当我将画布放在列的顶部时，将鼠标悬停在列上以显示照片不再起作用。如何留下鼠标线迹，以便在将鼠标悬停在列上时出现图像？

<div class="container">
  <canvas id="c" width="100%" height="100%" ></canvas>
  <div class="row">
       <div class="col" id="col1" >
             <img class="media-overlay col-1 left top" id="img1" 
             src="imgs/port2.jpg" alt="port2" />
       </div>
       <div class="col" id="col2">
             <img class="media-overlay col-1 left bottom  " id="img2" 
             src="imgs/port1.jpg" alt="port1" />
             </div>
 
        <div class="col" id="col3">
              <img class="media-overlay col-2 right top" 
              src="imgs/land1.jpg" id="img3" alt="land1" />
         </div>
 
  </div>

<script> // this draws the line that follows the mouse movements
const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
c.onmouseover = e => {
  // add a new path object
  pathes.push({
    pts: [], // an array of points
    dashed: check.checked // boolean
  });
  mouse_down = true; // we should draw
}
c.onmouseup = c.onmouseleave = e => mouse_down = false;

c.onmousemove = throttle(e => {
  if (!mouse_down) {
    return;
  } else {
    const rec = c.getBoundingClientRect();
    // add a new point
    addPoint(e.clientX - rec.left, e.clientY - rec.top);
    redraw(); // redraw everything
  }
});

function redraw() {
  ctx.clearRect(0, 0, c.width, c.height); // we clear everything
  // and draw every pathes
  pathes.forEach(path => {
    ctx.setLineDash(path.dashed ? [5, 5] : [0]);
    // set line color
    // ctx.strokeStyle = '#FFFFFF';
    ctx.beginPath();
    path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
    ctx.stroke();
  })
}

function addPoint(x, y) {
  // append to the last one
  const points = pathes[pathes.length - 1].pts;
  points.push({
    x: x,
    y: y
  });
}


// just to avoid unnecessary drawings
function throttle(callback) {
  if (typeof callback !== 'function')
    throw 'A callback function must be passed';
  var active = false;
  var evt;
  var handler = function() {
    active = false;
    callback(evt);
  };
  return function handleEvent(e) {
    evt = e;
    if (!active) {
      active = true;
      requestAnimationFrame(handler);
    }
  };
}

//css
body {
margin: 0;
padding: 0; 
height:100%;                    
}

.row {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
}

.col {
  height: 100%;
  width: 300px;
  position: relative;
  flex-shrink: 0;  
}
img.media-overlay {
  position: absolute;
  display:none;
}
  
.col:hover img {
  display: block;
}
canvas {
  display:block;
  border: 1px solid;
  position: absolute;
  padding: 0;
  margin:0;
  z-index: 1;

 
}

// this draws the line that follows the mouse movements
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
c.onmouseover = e => {
  // add a new path object
  pathes.push({
    pts: [], // an array of points
    dashed: true // boolean
  });
  mouse_down = true; // we should draw
}
c.onmouseup = c.onmouseleave = e => mouse_down = false;

c.onmousemove = throttle(e => {
  if (!mouse_down) {
    return;
  } else {
    const rec = c.getBoundingClientRect();
    // add a new point
    addPoint(e.clientX - rec.left, e.clientY - rec.top);
    redraw(); // redraw everything
  }
});

function redraw() {
  ctx.clearRect(0, 0, c.width, c.height); // we clear everything
  // and draw every pathes
  pathes.forEach(path => {
    ctx.setLineDash(path.dashed ? [5, 5] : [0]);
    // set line color
    // ctx.strokeStyle = '#FFFFFF';
    ctx.beginPath();
    path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
    ctx.stroke();
  })
}

function addPoint(x, y) {
  // append to the last one
  const points = pathes[pathes.length - 1].pts;
  points.push({
    x: x,
    y: y
  });
}


// just to avoid unnecessary drawings
function throttle(callback) {
  if (typeof callback !== 'function')
    throw 'A callback function must be passed';
  var active = false;
  var evt;
  var handler = function() {
    active = false;
    callback(evt);
  };
  return function handleEvent(e) {
    evt = e;
    if (!active) {
      active = true;
      requestAnimationFrame(handler);
    }
  };
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
}

.col {
  height: 100%;
  width: 300px;
  position: relative;
  flex-shrink: 0;
}

img.media-overlay {
  position: absolute;
  display: none;
}

.col:hover img {
  display: block;
}

canvas {
  display: block;
  border: 1px solid;
  position: absolute;
  padding: 0;
  margin: 0;
  z-index: 1;
}

<div class="container">
  <canvas id="c" width="100%" height="100%"></canvas>
  <div class="row">
    <div class="col" id="col1">
      <img class="media-overlay col-1 left top" id="img1" src="imgs/port2.jpg" alt="port2" />
    </div>
    <div class="col" id="col2">
      <img class="media-overlay col-1 left bottom  " id="img2" src="imgs/port1.jpg" alt="port1" />
    </div>

    <div class="col" id="col3">
      <img class="media-overlay col-2 right top" src="imgs/land1.jpg" id="img3" alt="land1" />
    </div>

  </div>

_{@saltykiam绘制鼠标轨迹时如何影响画布后面的悬停元素的问题的松散翻译。}

Alexandr_TT

Asked: 2022-04-16 18:40:17 +0800 CST

显示裁剪边缘的 SVG

1

使用本机 SVG 或 CSS 语法，我可以做些什么来防止剪裁的边缘出现在我的 SVG 中？

body {
  margin: 0;
  background: #fff;
  text-align: center;
}
#profile-pic {
  width: 33%;
}
#profile-pic text {
  font-size: 48px;
  font-family: monospace;
  font-weight: bold;
  fill: #000;
  -webkit-animation: raise 1s linear infinite alternate;
          animation: raise 1s linear infinite alternate;
}
@-webkit-keyframes raise {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}
@keyframes raise {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}

<svg id="profile-pic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
  <title>Brandon McConnell</title>
<defs>
  <clipPath id="imageClipPath"><circle cx="250" cy="250" r="116" fill="#FFFFFF" /></clipPath>
</defs>
    <text dy="70" textLength="500">Lorem Ipsum</text>
    <image
    href="https://s.gravatar.com/avatar/6e25e38e140dda7ac64f7865b3df77ab?s=500"
    clip-path="url(#imageClipPath)"
    width="240"
    height="240"
         x="130"
         y="130"
  />
</svg>

我在最新版本的 Chrome 中看到了这一点。截屏：

https://isstatic.askoverflow.dev/ZCfll.png

系统特点：

MacBook Pro (Retina, 15-inch, Late 2013)    
macOS Big Sure - Version 11.6.1 (20G224)
Google Chrome - Version 95.0.4638.69 (Official Build) (x86_64)

_{SVG 的松散翻译显示了 @Brandon McConnell的剪裁边缘问题。}

Alexandr_TT

Asked: 2022-04-16 17:24:49 +0800 CST

SVG - 带有径向渐变的 feGaussianBlur 过滤器的蒙版

1

我想模糊图像的角落，同时保持中心清晰。排除了使用 cssbackdrop-blur()的可能性，因为 Firefox 不支持它。在模糊的图像上添加清晰的图像，然后掩盖第一个图像也是不可行的，因为最后我想用 three.js 场景修改静态图像。

我尝试遵循本指南，但使用径向渐变而不是固定带。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <filter id="blurlayer" width="100%" height="100%">
            
          <feGaussianBlur stdDeviation="4" result="blur"/>
            
          <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" result="mask">
            <stop offset="0%" stop-color="white" stop-opacity="1" />
            <stop offset="100%" stop-color="black" stop-opacity="0" />
          </radialGradient>
            
          <feComposite in="blur" in2="mask" operator="in" result="comp" />
            
          <feMerge result="merge">
            <feMergeNode in="SourceGraphic" />
            <feMergeNode in="comp" />
          </feMerge> 
        </filter>
      </defs>

      <image filter="url(#blurlayer)" x="0" y="0" width="100%" height="100%"   xlink:href="https://www.wildtextures.com/wp-content/uploads/wildtextures-grey-felt-texture.jpg"/>
    </svg>

这不起作用。谁能帮我找出原因？
如果它对任何人有帮助，我发布了codepen。

_{SVG 问题的松散翻译- mask feGaussianBlur with RadialGradient by @morph3us。}

2024-2025年新年比赛！

恭喜 NG 2025 比赛 NNL993 的获胜者

主题列表：

附加材料：

比赛获胜者

强制动画返回其原始值（背景颜色）

如何制作军刀凸轮机构的动画？

祝贺比赛获胜者 Stanislav Volodarskiy！

更新

为什么SVG合并路径后会被切断？

如何在箭头上制作圆角

无法在 Adobe Illustrator 中打开生成的 SVG QR 代码

为什么将 CSS 过滤器应用于父元素会破坏子元素的定位？

如何在SVG中制作重复文本？

检测距离 <= 3 像素的 SVG 行的点击

SVG animateTransform 缩放 keySplines 以适应旋转矢量的 Y 分量（箭头）

如何在 Javascript 中以编程方式在画布上绘制三角形？

将徽标颜色切换为深色模式的问题

2022年新年比赛！

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

如何使用 Canvas 制作圆形进度条？

使用 <canvas> 创建网格

如何使用 HTML Canvas 绘制圆角矩形？

用鼠标在 HTML5 画布上绘图

绘制鼠标轨迹时如何影响：悬停在画布后面的元素

显示裁剪边缘的 SVG

SVG - 带有径向渐变的 feGaussianBlur 过滤器的蒙版

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

Alexandr_TT's questions

恭喜 NG 2025 比赛 NNL993 的获胜者

主题列表：

附加材料：

比赛获胜者

祝贺比赛获胜者 Stanislav Volodarskiy！

更新

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