主页 / user-377637

Sevastopol''s questions

Martin Hope
Sevastopol'
Asked: 2022-05-08 20:07:41 +0000 UTC
  • 2

我有一张坐标用点标记的地图。坐标是铺设路径的城市（SVG path）：

地图图像

我也有一个带有文本的 HTML 页面。这是完整的代码，包括包含path点之间的五个单独路径 ( ) 的 SVG 元素：

* {margin: 0; padding: 0;}

.map {
  z-index: -1;
  position: fixed;
  left: 200px;
  top: 0;
}

.container {
  z-index: 1;
  width: 200px;
  padding: 0 50px;
  background: rgba(105, 105, 105, 0.5);
}
<!--Контейнер с картой-->
<div class="map">
<svg id="svg__map" viewBox="0 0 2000 1200" width="1066" height="674">

<!--Карта-->
<g><image width="1066" height="674" href="https://i.imgur.com/XJuEphL.jpg"></image></g>

<!--Путь от A до B-->
<path id="path1" class="path1" fill="none" stroke="#663300" stroke-width="5px" d="m 1006.6935,300.78037 c -13.55545,29.46202 -27.11017,58.92249 -67.74599,70.14934 -40.63581,11.22686 -108.35019,4.21965 -147.13455,11.65573 -38.78435,7.43609 -48.63328,29.31505 -58.48177,51.19306" />

<!--Путь от B до C-->
<path id="path2" class="path2" fill="none" stroke="#663300" stroke-width="5px" d="m 733.33119,433.7785 c -82.33315,24.09565 -164.66581,48.19116 -211.78405,77.70384 -47.11823,29.51267 -59.0192,64.44082 -70.91984,99.368" />

<!--Путь от C до D-->
<path id="path3" class="path3" fill="none" stroke="#663300" stroke-width="5px" d="m 450.6273,610.85034 c -40.2612,17.04533 -80.51892,34.08919 -105.72098,31.21185 -25.20205,-2.87734 -35.34421,-25.6782 -45.48659,-48.47955" />

<!--Путь от D до E-->
<path id="path4" class="path4" fill="none" stroke="#663300" stroke-width="5px" d="m 299.41973,593.58264 c -3.42221,-25.74545 -6.84463,-51.49251 15.38407,-59.43661 22.2287,-7.94411 70.10773,1.91513 103.14042,-11.8242 33.0327,-13.73933 51.21935,-51.07636 69.40684,-88.41511" />

<!--Путь от E до F-->
<path id="path5" class="path5" fill="none" stroke="#663300" stroke-width="5px" d="m 487.35106,433.90672 c -28.94353,0.82098 -57.88415,1.64188 -84.24414,-21.98436 -26.35998,-23.62623 -50.13229,-71.6952 -78.04729,-85.49903 -27.91501,-13.80383 -59.96879,6.66336 -92.02183,27.13006" />

</svg>
</div>

<!--Контейнер с текстом-->
<div class="container">

<!--Пунк A-->
<div class="item__a">
<h2>Пунк A</h2>
<div class="text__about">
<p>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк B-->
<div class="item__b">
<h2>Пунк B</h2>
<div class="text__about">
<p>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк C-->
<div class="item__c">
<h2>Пунк C</h2>
<div class="text__about">
<p>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк D-->
<div class="item__d">
<h2>Пунк D</h2>
<div class="text__about">
<p>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк E-->
<div class="item__e">
<h2>Пунк E</h2>
<div class="text__about">
<p>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

<!--Пунк F-->
<div class="item__f">
<h2>Пунк F</h2>
<div class="text__about">
<p>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f</p>
</div>
<div class="text__other">
<p>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст</p>
</div>
</div>

</div>

问题：如何根据正在查看的 HTML 内容，分别使用指向页面滚动的链接来启动每个路径的绘制动画？每个带有城市信息的 HTML 片段的标记如下所示，例如 item B：

<!--Пунк B-->
<div class="item__b">
<h2>Пунк B</h2>
<div class="text__about">
<p>пунк b</p>
</div>
<div class="text__other">
<p>текст</p>
</div>
</div>

item__b是包含城市信息的 HTML 片段的父元素B。当这个元素的顶部接触到浏览器窗口的底部时，从点到点的路径在A点B结束B。

text__about— 当滚动这个元素时，什么也没有发生；

text__other- 当滚动这个元素时，当它的上部接触到浏览器窗口的下部时，开始绘制从点到点的B路径C。并在元素顶部item__с触及浏览器窗口底部时结束；

有兴趣通过问题标签中指示的任何方式和技术详细描述此类实现和实现本身。

javascript
Martin Hope
Sevastopol'
Asked: 2022-05-05 20:19:53 +0000 UTC
  • 8

我有一张用以下内容绘制的汽车图像SVG：

<svg id="svg" viewBox="0 0 1500 1000">

  <!--Автомобиль-->
  <g id="car">
  <!--Зеркала-->
<path d="M371 88l-31-77c-3-6-9-11-17-11h-23l35 88zm0 142h-36l-35 88h23c8 0 14-5 17-11z" fill="red" />
  <!--Кузов-->
    <path d="M492 224l13-30c9-22 9-48 0-70l-13-30a88 88 0 0 0-88-53L256 53 104 40c-36-3-70 17-86 49l-3 7c-20 40-20 86 0 126l3 7a88 88 0 0 0 86 49l152-13 148 12c38 3 73-18 88-53z" fill="orangered" />
    <!--Тень кузова-->
    <path d="M396 277c66-50 95-134 74-214 9 9 17 19 22 31l13 30c9 22 9 48 0 70l-13 30a88 88 0 0 1-88 53z" fill="red" />
    <!--Переднее стекло-->
    <path d="M369 91l-2-3c-3-5-10-8-16-7l-77 7v142l77 7c6 1 13-2 16-7l2-3c27-41 27-95 0-136z" fill="white" />
    <!--Тень переднего стекла-->
    <path d="M370 92c26 41 26 94-1 135l-2 3c-3 5-10 8-16 7l-59-6c44-33 72-84 78-139z" fill="lightgray" />
    <!--Заднее стекло-->
    <path d="M150 88v142l-41 6c-7 2-14-2-18-8l-9-18c-18-32-18-70 0-102l9-18c4-6 11-10 18-8z" fill="white" />
    <!--Тень заднего стекла-->
    <path d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
  </g>

</svg>

还有一张城市地图的图像，我想在其道路上重现汽车运动的动画：

在此处输入图像描述

我设法将SVG城市地图和汽车图像合二为一。此外，使用动画命令<animateTransform>和属性，translate(x,y)我能够重现汽车沿道路行驶的动画。

在此处输入图像描述

点击地图后动画开始

<svg id="svg" viewBox="0 0 1600 900">

  <g id="map" x="0" y="0">
    <image href="https://i.imgur.com/kb3KgeW.jpg">
    </image>
  </g>

  <!--Автомобиль-->
  <g transform="translate(10,456)">
  <g transform="scale(0.08)">
  <!--Зеркала-->
<path d="M371 88l-31-77c-3-6-9-11-17-11h-23l35 88zm0 142h-36l-35 88h23c8 0 14-5 17-11z" fill="red" />
  <!--Кузов-->
    <path d="M492 224l13-30c9-22 9-48 0-70l-13-30a88 88 0 0 0-88-53L256 53 104 40c-36-3-70 17-86 49l-3 7c-20 40-20 86 0 126l3 7a88 88 0 0 0 86 49l152-13 148 12c38 3 73-18 88-53z" fill="orangered" />
    <!--Тень кузова-->
    <path d="M396 277c66-50 95-134 74-214 9 9 17 19 22 31l13 30c9 22 9 48 0 70l-13 30a88 88 0 0 1-88 53z" fill="red" />
    <!--Переднее стекло-->
    <path d="M369 91l-2-3c-3-5-10-8-16-7l-77 7v142l77 7c6 1 13-2 16-7l2-3c27-41 27-95 0-136z" fill="white" />
    <!--Тень переднего стекла-->
    <path d="M370 92c26 41 26 94-1 135l-2 3c-3 5-10 8-16 7l-59-6c44-33 72-84 78-139z" fill="lightgray" />
    <!--Заднее стекло-->
    <path d="M150 88v142l-41 6c-7 2-14-2-18-8l-9-18c-18-32-18-70 0-102l9-18c4-6 11-10 18-8z" fill="white" />
    <!--Тень заднего стекла-->
    <path d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
    </g>
    <animateTransform attributeName="transform" type="translate"
   begin="svg.click" dur="15s" values="10,456; 1510,456; 10,456" additive="replace" calcMode="linear" repeatCount="indefinite" fill="freeze" restart="whenNotActive" />
  </g>

</svg>

然而，这样的动画只会让汽车直线移动一段路，这根本不是我想要的结果。

问题：如何播放城市地图上显示的汽车沿整条道路移动的动画？如果可能的话，最好考虑以下几点。城市地图图像的大小为 1600x900。如果用户的屏幕尺寸较小，则相应地，在我的示例中，整个 SVG 元素的尺寸会减小，以适应浏览器窗口的尺寸。那么，如何为 SVG 元素设置固定尺寸（例如，600x300），使其所有内部元素（地图和汽车）的尺寸不会减小，并且当汽车移动时，地图会在 SVG 元素内跟随它移动?

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-22 19:32:31 +0000 UTC
  • 2

基于问题：使用绑定到页面滚动绘制 SVG 元素

我有以下 SVG 元素，其绘制动画是通过滚动文档的整个页面来触发的：

let p = document.getElementById('path');
let pl = p.getTotalLength();
p.style.strokeDasharray = pl; p.style.strokeDashoffset = pl; 
$(window).on('scroll',function(){
  let scrollTo = $(window).scrollTop() /
  (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  draw = pl * scrollTo;
  p.style.strokeDashoffset = pl - draw;
})
body {margin: 0;}

.header, .footer {height: 150vh; background: chocolate;}

.parallax {height: 5000px; background: gold;}

#svg {
  position: fixed;
  top: 10px;
  left: 10px;
}

path {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header"></div>

<div class="parallax">
<!--котейка-->
<svg id="svg" width="500px" height="200px" viewBox="150 0 1 150">

<path id="path" d="M154.5,2.4c0,0,5.5,8.6,2.9,17.5l-1.1-3.4c0,0,0.1,21.1-8.6,26.2l0-4.3c0,0-7.5,22.9-26.8,13.8  C117.2,39.6,110,30.6,99.1,26c-3.8-2.1-8.3-3.2-13.6-3.2c-4.1-0.3-8.4-0.3-13.2,0.3c-22.5,2.6-41.6,20.1-39.4,52  c0.1,0.8,0.2,1.9,0.3,3c-1.5,0.6-3,1.2-4.5,2l-9-10.4l-4.6,16.6L1,87.5l7.8,9.2l-6.3,0.4c0,0,6.4,10.8,10.5,14.2  c11,8.9,21.8,11.5,31.7,10.7c1.5,4.1,3,7.8,4.5,10.8c-3.6-3.6-4.9,2.6-2.3,5.2c1-0.3,1.6,0,2.6-1c1.3,3.3,3.3,2,3.9-0.6  c5.5,6.3,4.6-9.1-0.3-3.6c-1.1-4-1.9-7.9-2.5-11.8c1.4-0.3,2.8-0.7,4.1-1.1c1.4,4.4,2.9,8.5,4.4,11.8c-1.8,0.2-2.1,4.3-0.1,6.3  c1-0.3,1.6,0,2.6-1c1.3,3.3,3.3,2,3.9-0.6c5.5,6.3,4.6-9.1-0.3-3.6l-2,0c-1.2-5.2-2.1-10.3-2.8-15.1c17.9-8,30.1-24.3,30.1-24.3  l-7.4-0.5l10.1-7L75,82.9l0.5-16l-13.9,9.9c2-6.7,5.1-11.4,9.1-13.6c4.5-1.6,9.4-1.4,14.6,1.1c2.9,1.6,5.9,3.9,9.1,7.1  c14.5,17.9,0.4,52-3.9,61.5l0,0c-3.6-3.6-4.9,2.6-2.3,5.2c1-0.3,1.6,0,2.6-1c1.3,3.3,3.3,2,3.9-0.6c5.4,6.2,4.6-8.6-0.1-3.8  c4.6-6.4,9.1-12.8,13.2-19.2c-1.1,6.2-2.9,12.3-5.6,17.9c-3-2-3.9,3.5-1.5,5.9c1-0.3,1.6,0,2.6-1c1.3,3.3,3.3,2,3.9-0.6  c5.5,6.3,4.6-9.1-0.3-3.6l-0.2,0c2.8-6.3,10-23.9,13-42.3c3.5-10,4.9-20.1,3-30.5c5,3.3,12.8,5.4,23.9,0l-3.6-0.7  c0,0,18.4-1.7,22-16.2l-3,2.1C161.9,44.4,176.7,20.6,154.5,2.4z"/>

<!--глазки-->
<path d="M40.5,107.1c0,0-1.9-8.5-8.4-13.3c-0.4-2.5-1-4.1-1.7-4.1c-0.5,0-1,0.9-1.3,2.3c-1.7-0.8-3.6-1.3-5.8-1.4  c0,0-5.7,6.1-1.3,12.4c1.6,2.3,4.4,3.4,7.3,4c0.3,0.9,0.7,1.4,1.1,1.4c0.3,0,0.7-0.4,0.9-1.1C36,107.8,40.5,107.1,40.5,107.1z"/>
<path d="M68.1,86.2c-2.4,0.4-4.4,1.3-6.1,2.4c-0.7-1.4-1.5-2.2-2-2c-0.6,0.2-0.8,1.8-0.6,4.1 c-5.9,5.6-7.2,14.3-7.2,14.3s6,0.3,11.3-1.4c0.5,0.8,1,1.2,1.4,1.1c0.4-0.1,0.6-0.8,0.7-1.9c1.9-0.9,3.6-2.2,4.6-3.9 C73.8,92,68.1,86.2,68.1,86.2z"/>

</svg>
</div>

<div class="footer"></div>

问题：如何启动绑定到页面滚动但在块范围内的 SVG 元素的绘制动画.parallax？当块.parallax的顶部接触浏览器窗口的顶部时，元素绘制动画应该开始。当块.parallax的底部接触浏览器窗口的底部时，动画应该结束。

有兴趣通过问题标签中指示的任何方式和技术详细描述此类实现和实现本身。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-21 21:55:31 +0000 UTC
  • 2

我有一个包含一组不同元素的容器。所有物品均采用颜色编码。只有三种颜色。每个元素都有一个样式类名称 ( class)，它允许您将每个元素与其所需的样式相关联。一般容器中的元素是不按颜色分组的，实际上是分散在里面的。在视觉上它看起来像这样：

所有元素

这html是css代码：

body {overflow: hidden; width: 100%; margin: 0; text-align: center;}

.container {width: 100%; margin: 0 auto;}

.filter {
  float: left; cursor: pointer; width: 23%;
  margin: 0.5%; margin-bottom: 10px; padding: 0.5%;
  background: white; text-align: center; color: black;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.item {
  float: left; width: 23%; height: 20px; line-height: 20px;
  margin: 0.5%; padding: 0.5%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: all 1s;
}

.blue {background: deepskyblue;}
.red {background: orangered;}
.green {background: limegreen;}
<div class="container">
  <div class="filter">Синий</div>
  <div class="filter">Красный</div>
  <div class="filter">Зеленый</div>
  <div class="filter">Показать все</div>

  <div class="item blue">1</div>
  <div class="item red">2</div>
  <div class="item blue">3</div>
  <div class="item green">4</div>
  <div class="item blue">5</div>
  <div class="item red">6</div>
  <div class="item red">7</div>
  <div class="item green">8</div>
  <div class="item blue">9</div>
  <div class="item green">10</div>
  <div class="item red">11</div>
  <div class="item green">12</div>
  <div class="item blue">13</div>
  <div class="item blue">14</div>
  <div class="item green">15</div>
  <div class="item red">16</div>
</div>

问题：点击颜色名称时，如何过滤所有元素，只显示所选颜色的元素，隐藏所有其他元素？例如，当您单击“红色”时，它应如下所示：

选定项目

对问题标签中指示的任何方式和技术的实施感兴趣。它可以是：CSS、jQuery、Native Script。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-19 22:16:02 +0000 UTC
  • 1

我有一个 SVG 元素。我通过指向页面滚动的链接开始绘制边框的动画。以下是此类动画的示例：

const htmlElem = document.querySelector("html");
const pathElem = document.querySelector(".path");
const dashOffset = parseInt(getComputedStyle(pathElem).strokeDashoffset);
document.addEventListener("scroll", () => {
  const percentageComplete =
    (window.pageYOffset / (htmlElem.offsetHeight - window.innerHeight)) * 100;
  const offsetUnit = (percentageComplete * dashOffset) / 100;
  pathElem.style.strokeDashoffset = dashOffset - offsetUnit;
});

//прогресс
let x = $('.progress');
$(window).on('scroll',function(){
  let st = $(window).scrollTop();
  let sa = $(document).height();
  let sb = $(window).height();
  let dd = Math.ceil(100 * (st / (sa - sb)));
  x.css({width : dd + '%'})
})
body {margin: 0; height: 3000px;}

.progress {position: fixed; top: 0; left: 0; width: 0%; height: 5px; background-color: red;}
.progress::after {content: "Крутим вниз"; white-space: nowrap; position: absolute; top: 15px; left: 15px;}

#svg {
  position: fixed;
  top: 0;
  left: -200px;
}

path {
  stroke-dashoffset: 2000;
  stroke-dasharray: 2000;
  fill: none;
  stroke: darkorange;
  stroke-width: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="progress"></div><!--прогресс-->

<svg id="svg" width="640" height="480">
<g>

<circle fill="orange" stroke="orangered" stroke-width="6px" r="13.53787" cy="287.50003" cx="279.99998"/>

<path class="path" d="m396.35663,311.25821c-13.41742,-10.47318 -28.76758,-3.96683 -43.5509,-4.75632c-12.93182,-11.07962 -28.66629,2.3475 -40.85934,-8.33789c-15.77493,-14.05475 11.56558,-22.86807 5.7373,-39.56415c-0.65771,-24.0419 -10.94836,-45.81717 -21.77539,-66.02428c-7.65988,-16.06839 -4.94803,-34.53508 -7.41699,-51.7166c-8.85388,-12.34473 -17.69766,-27.62405 -7.16412,-42.87289c11.90973,-12.87106 6.30396,-29.77943 1.62924,-44.65391c12.03101,3.54156 25.85321,19.66071 41.68884,16.43285c10.75632,-6.93137 17.29297,-0.08103 19.09409,12.61797c5.64624,16.29109 8.93484,38.5827 26.75375,43.83432c18.70941,5.34254 39.6553,6.52644 54.44867,22.20027c27.06769,25.3474 39.60474,65.31624 38.552,103.83789c2.43921,18.01105 25.04413,8.44919 36.23547,11.10004c18.74976,-0.82904 36.76111,5.06967 54.91443,9.1069c16.20013,4.31042 29.92078,-9.31888 45.14905,-10.9483c2.57037,15.745 -17.41418,22.30164 -28.33221,27.15833c-12.95184,5.51471 -26.98676,5.64691 -40.29266,1.6095c-28.78772,-7.18442 -59.29565,-5.29221 -86.63629,7.31573c-14.76294,5.44357 -29.09103,15.73447 -45.14957,14.43954l-3.02536,-0.77902l0,0l0,0z" />

</g>
</svg>

如示例所示，动画在页面完成滚动之前结束。

问题：如何将在页面滚动上绘制 SVG 元素边框的动画与页面滚动时间计时，以便动画在页面滚动结束时准确结束？

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-19 20:27:01 +0000 UTC
  • 3

我有一个 SVG 元素，我在页面滚动上制作动画。以下是此类动画的示例：

const htmlElem = document.querySelector("html");
const pathElem = document.getElementsByClassName("path");
const dashOffset = parseInt(getComputedStyle(pathElem[1]).strokeDashoffset);

document.addEventListener("scroll", () => {
  const percentageComplete = (window.pageYOffset / (htmlElem.offsetHeight - window.innerHeight)) * 100;
  const offsetUnit = (percentageComplete * dashOffset) / 100;
    for(var i=0; i< pathElem.length; i++){
      pathElem[i].style.strokeDashoffset = dashOffset - offsetUnit;
    }
});
body {height: 3000px; margin: 0; background: linear-gradient(to top, aliceblue 0%, #f1f1f1 100%);}

svg {position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

/*#flower1 .path {fill: darkred; stroke: red; stroke-width: 2px;}
#flower2 .path {fill: hotpink; stroke: pink; stroke-width: 2px;}*/

.path {
  stroke-dashoffset: 1000;
  stroke-dasharray: 1000;
}
<svg width="500px" height="300px" viewBox="0 250 1000 600"">

<!--Земелька-->
<ellipse cx="550" cy="800" rx="160" ry="30" fill="saddlebrown"></ellipse>
    
<!--Стебельки-->
<path class="path" d="M541.949,796.651C541.949,796.651 547.184,323.084 678.894,323.084" fill="none" stroke="seagreen" stroke-width="10px"></path>
<path class="path" d="M541.949,796.651C541.949,796.651 551.899,486.411 420.189,486.411" fill="none" stroke="darkgreen" stroke-width="10px"></path>

<!--Маленький цветочек-->
<g id="flower1">
<!--1-->
<path class="path" d="M428.978,471.834C432.403,442.643 417.768,427.411 393.485,418.542L390.134,431.596C408.846,440.229 420.336,459.059 422.204,479.424L428.978,471.834Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--2-->
<path class="path" d="M422.204,479.424C419.113,454.569 407.696,439.479 390.134,431.596L351.535,424.692L358.221,452.294C385.877,452.6 405.744,462.365 418.46,482.267L422.204,479.424Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--3-->
<path class="path" d="M422.475,487.371C419.207,489.427 421.042,488.78 412.988,493.846C394.301,505.601 363.923,507.197 349.538,498.114C335.987,489.559 329.338,474.667 319.336,468.923C330.583,467.52 340.097,453.545 357.544,453.356C380.359,453.11 406.09,461.465 416.222,478.92C416.222,478.92 415.058,476.623 422.475,487.371Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--4-->
<path class="path" d="M419.368,495.279C407.853,517.521 391.913,527.718 372.708,529.024L334.108,522.12L349.948,498.548C375.996,507.847 397.999,505.663 416.826,491.403L419.368,495.279Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--5-->
<path class="path" d="M423.111,504.638C416.205,533.205 397.197,542.42 371.345,542.322L372.708,529.024C393.251,527.413 410.557,513.733 419.368,495.279L423.111,504.638Z" fill="none" stroke="red" stroke-width="4px"></path>
<!--Липесточки-->
<path class="path" d="M491.579,675.248C520.14,694.258 535.023,682.287 535.023,682.287C535.023,682.287 524.681,666.229 491.579,675.248" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M477.287,629.978C513.489,672.78 535.574,653.35 535.574,653.35C535.574,653.35 523.816,620.349 477.287,629.978" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M470.908,576.711C499.469,595.72 514.353,583.749 514.353,583.749C514.353,583.749 504.01,567.692 470.908,576.711" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M531.314,528.818C502.976,548.159 508.487,566.447 508.487,566.447C508.487,566.447 527.252,562.886 531.314,528.818" fill="none" stroke="green" stroke-width="4px"></path>
</g>

<!--Большой цветочек-->
<g id="flower2">
<!--1-->
<path class="path" d="M673.036,306.255C674.187,276.887 691.011,264.113 716.377,259.125L717.657,272.43C697.831,278.051 683.555,294.867 678.546,314.695L673.036,306.255Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--2-->
<path class="path" d="M678.546,314.695C685.461,290.622 699.084,277.489 717.657,272.43L756.86,271.607L745.967,297.835C718.599,293.84 697.454,300.31 681.8,317.994L678.546,314.695Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--3-->
<path class="path" d="M677.055,323.059C679.855,320.401 678.183,321.396 685.082,314.844C701.093,299.643 730.563,292.104 746.453,298.179C761.423,303.902 770.871,317.195 781.807,320.859C771.056,324.447 764.478,340.02 747.408,343.637C725.087,348.367 698.215,345.236 684.848,330.115C684.848,330.115 686.441,332.138 677.055,323.059Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--4-->
<path class="path" d="M678.884,330.798C686.804,354.559 700.966,367.108 719.735,371.383L758.938,370.559L746.953,344.812C719.777,349.952 698.378,344.286 681.995,327.274L678.884,330.798Z" fill="none" stroke="indianred" stroke-width="4px"></path>
<!--Липесточки-->
<path class="path" d="M604.787,580.256C549.343,588.543 554.257,617.545 554.257,617.545C554.257,617.545 588.511,624.896 604.787,580.256" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M600.04,531.952C566.063,536.712 562.888,555.546 562.888,555.546C562.888,555.546 581.285,560.681 600.04,531.952" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M525.872,465.517C539.274,519.951 567.694,512.364 567.694,512.364C567.694,512.364 571.831,477.576 525.872,465.517" fill="none" stroke="green" stroke-width="4px"></path>
<path class="path" d="M633.105,495.208C579.891,477.577 571.185,505.675 571.185,505.675C571.185,505.675 598.432,527.696 633.105,495.208" fill="none" stroke="green" stroke-width="4px"></path>
</g>

</svg>

该元素包含几个不同的补丁，它们共同构成一个整体模式。正如您在示例中看到的，当滚动页面时，所有补丁的绘制动画同时开始，并根据每个补丁的长度在不同的时间结束。

问题：如何依次启动每个补丁的绘制动画？对在加载文档和滚动页面时执行此类动画感兴趣。还对两种实现的详细描述感兴趣。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-19 20:16:52 +0000 UTC
  • 1

我有一个 SVG 元素，我在页面滚动上制作动画。以下是此类动画的示例：

var path = document.querySelectorAll('path'), 
        percentScroll;
$(path).each(function(){
  this.style.strokeDasharray = this.getTotalLength();
  this.style.strokeDashoffset = this.getTotalLength();
});
window.onscroll = function(){
  var viewportHeight = $(window).height();
var viewportTopX = $(window).scrollTop();
var viewportBottomX = viewportTopX + viewportHeight;
var elementHeight = $('#content').outerHeight();
var elementTopX = $('#content').offset().top;
var elementBottomX = elementTopX + elementHeight;
var percentScroll = (viewportBottomX - elementTopX) / ((viewportHeight + elementHeight) / 100);
  //console.log('%', 1 - percentScroll);
  foo = window.pageYOffset / (document.body.offsetHeight - window.innerHeight)
  //console.log('window', foo)
  $(path).each(function(){
    //console.log('math', Math.floor(this.getTotalLength() * (1 - foo)))
    this.style.strokeDashoffset = Math.floor(this.getTotalLength() * (1 - foo));
  });
};

//прогресс
let x = $('.progress');
$(window).on('scroll',function(){
  let st = $(window).scrollTop();
  let sa = $(document).height();
  let sb = $(window).height();
  let dd = Math.ceil(100 * (st / (sa - sb)));
  x.css({width : dd + '%'})
})
body {margin: 0; height: 3000px;}
.progress {position: fixed; top: 0; left: 0; width: 0%; height: 5px; background-color: red;}
.progress::after {content: "Крутим вниз"; white-space: nowrap; position: absolute; top: 15px; left: 15px;}

#svg {
  position: fixed;
  top: 10px;
  left: 10px;
}

path {
  fill: none;
  stroke: black;
  stroke-width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress"></div><!--прогресс-->

<div id="content">
<svg id="svg" width="280px" height="280px" viewBox="0 0 1046 1280">
<g transform="translate(0,1280) scale(0.1,-0.1)" fill="none" stroke="black" stroke-width="100">
<path class="path" d="M6125 12741 c-387 -139 -597 -254 -908 -495 -233 -181 -331 -236 -422 -236 -17 0 -69 11 -115 24 -115 33 -387 82 -540 97 -236 22 -573 0 -849 -56 -161 -33 -227 -39 -285 -25 -32 7 -108 48 -220 117 -381 238 -783 418 -1165 522 l-74 20 7 -87 c47 -605 193 -1137 396 -1443 l40 -60 -25 -65 c-38 -101 -93 -307 -116 -439 -18 -97 -22 -161 -23 -330 0 -213 11 -317 49 -441 26 -86 51 -79 -277 -76 -331 4 -697 -10 -1025 -38 -215 -19 -564 -59 -572 -66 -2 -2 -1 -9 2 -17 4 -11 27 -10 138 4 476 63 1214 101 1600 84 l167 -7 36 -87 c20 -47 55 -121 80 -163 l43 -77 -36 -5 c-20 -3 -92 -13 -161 -21 -513 -65 -1082 -183 -1506 -315 -194 -59 -234 -76 -234 -95 0 -8 1 -15 3 -15 2 0 57 18 122 40 266 90 566 168 900 234 276 55 413 76 891 141 l41 6 58 -77 c31 -42 88 -109 126 -149 l69 -72 -118 -43 c-265 -97 -648 -277 -882 -415 -179 -105 -370 -235 -370 -251 0 -8 4 -14 9 -14 4 0 69 40 142 89 339 225 742 426 1156 577 l93 33 93 -94 c214 -215 287 -380 287 -652 0 -260 -53 -544 -204 -1093 -70 -254 -124 -480 -156 -652 -157 -835 -108 -1553 159 -2358 89 -266 155 -431 312 -782 274 -611 310 -727 354 -1146 22 -205 36 -683 33 -1072 l-3 -345 -88 -7 c-109 -8 -232 -32 -290 -57 -66 -28 -111 -73 -143 -143 -26 -56 -29 -74 -29 -158 0 -74 4 -103 19 -129 67 -123 257 -196 611 -235 1310 -143 2603 -163 3865 -61 684 56 1558 169 1680 218 349 141 670 737 925 1721 185 712 354 1713 371 2201 24 650 -166 1275 -569 1880 -207 310 -356 484 -807 940 -477 483 -631 662 -805 935 -143 224 -273 537 -311 747 -35 198 -28 460 18 673 47 221 145 445 262 601 203 269 554 486 916 565 66 15 125 19 260 18 157 0 185 -3 274 -27 228 -61 359 -160 386 -292 26 -124 -55 -283 -190 -373 -135 -91 -278 -109 -464 -59 -131 35 -183 41 -236 27 -75 -19 -115 -52 -150 -124 -30 -61 -32 -71 -28 -144 6 -97 36 -158 119 -238 71 -67 209 -135 321 -158 99 -20 253 -20 358 0 267 50 581 244 737 454 209 281 260 673 133 1013 -70 186 -311 431 -525 533 -206 98 -593 140 -925 99 -549 -68 -1041 -298 -1400 -654 -243 -242 -405 -492 -496 -769 l-37 -113 -56 6 c-135 13 -486 25 -753 25 -271 0 -289 1 -284 18 44 150 60 274 60 457 0 244 -33 410 -129 650 l-44 109 49 66 c252 342 406 715 456 1103 22 176 12 628 -15 627 -3 -1 -78 -27 -166 -59z m709 -3021 c88 -6 161 -11 162 -13 1 -1 -6 -42 -17 -92 -25 -119 -49 -305 -49 -377 0 -32 -3 -58 -6 -58 -3 0 -63 13 -132 29 -251 58 -593 119 -872 156 -69 9 -135 18 -147 21 -21 4 -20 8 32 117 29 61 61 138 71 169 18 53 21 57 54 62 57 7 732 -3 904 -14z m-604 -436 c173 -28 390 -71 666 -131 20 -5 21 -13 28 -166 27 -621 177 -1043 583 -1650 253 -378 580 -768 1023 -1222 273 -279 343 -357 438 -484 238 -315 387 -652 453 -1019 72 -406 36 -1045 -97 -1712 -160 -804 -476 -1596 -709 -1772 -91 -69 -196 -83 -285 -38 -126 65 -154 220 -111 605 12 105 37 318 56 475 62 523 75 690 75 955 0 641 -136 1169 -474 1844 -344 687 -592 1023 -1179 1597 -293 287 -426 407 -721 653 -143 120 -297 251 -340 292 -240 224 -359 512 -373 899 -4 114 -2 159 11 210 21 86 73 186 148 288 54 75 64 83 87 79 46 -10 341 -136 516 -222 207 -101 374 -196 564 -322 107 -71 146 -92 154 -84 8 8 8 14 2 19 -364 252 -809 488 -1172 621 -40 15 -60 27 -56 35 4 6 41 61 84 121 42 61 88 131 103 156 l26 46 143 -19 c78 -10 239 -34 357 -54z"/>
</g>
</svg>
</div>

在此示例中，SVG 元素包含一个补丁 ( path)，但很明显，绘图不是从起点到其路径的终点，而是同时在不同的位置。为什么会发生这种情况，它取决于什么？是否可以将一个补丁的公式分解为多个部分并调整它们的绘制顺序？对在加载文档和滚动页面时执行此类动画感兴趣。还对两种实现的详细描述感兴趣。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-18 21:32:48 +0000 UTC
  • 4

我有以下 SVG 元素：

<svg width="280px" height="280px" viewBox="0 0 1046 1280">
<g transform="translate(0,1280) scale(0.1,-0.1)" fill="none" stroke="black" stroke-width="100">
<path d="M6125 12741 c-387 -139 -597 -254 -908 -495 -233 -181 -331 -236 -422 -236 -17 0 -69 11 -115 24 -115 33 -387 82 -540 97 -236 22 -573 0 -849 -56 -161 -33 -227 -39 -285 -25 -32 7 -108 48 -220 117 -381 238 -783 418 -1165 522 l-74 20 7 -87 c47 -605 193 -1137 396 -1443 l40 -60 -25 -65 c-38 -101 -93 -307 -116 -439 -18 -97 -22 -161 -23 -330 0 -213 11 -317 49 -441 26 -86 51 -79 -277 -76 -331 4 -697 -10 -1025 -38 -215 -19 -564 -59 -572 -66 -2 -2 -1 -9 2 -17 4 -11 27 -10 138 4 476 63 1214 101 1600 84 l167 -7 36 -87 c20 -47 55 -121 80 -163 l43 -77 -36 -5 c-20 -3 -92 -13 -161 -21 -513 -65 -1082 -183 -1506 -315 -194 -59 -234 -76 -234 -95 0 -8 1 -15 3 -15 2 0 57 18 122 40 266 90 566 168 900 234 276 55 413 76 891 141 l41 6 58 -77 c31 -42 88 -109 126 -149 l69 -72 -118 -43 c-265 -97 -648 -277 -882 -415 -179 -105 -370 -235 -370 -251 0 -8 4 -14 9 -14 4 0 69 40 142 89 339 225 742 426 1156 577 l93 33 93 -94 c214 -215 287 -380 287 -652 0 -260 -53 -544 -204 -1093 -70 -254 -124 -480 -156 -652 -157 -835 -108 -1553 159 -2358 89 -266 155 -431 312 -782 274 -611 310 -727 354 -1146 22 -205 36 -683 33 -1072 l-3 -345 -88 -7 c-109 -8 -232 -32 -290 -57 -66 -28 -111 -73 -143 -143 -26 -56 -29 -74 -29 -158 0 -74 4 -103 19 -129 67 -123 257 -196 611 -235 1310 -143 2603 -163 3865 -61 684 56 1558 169 1680 218 349 141 670 737 925 1721 185 712 354 1713 371 2201 24 650 -166 1275 -569 1880 -207 310 -356 484 -807 940 -477 483 -631 662 -805 935 -143 224 -273 537 -311 747 -35 198 -28 460 18 673 47 221 145 445 262 601 203 269 554 486 916 565 66 15 125 19 260 18 157 0 185 -3 274 -27 228 -61 359 -160 386 -292 26 -124 -55 -283 -190 -373 -135 -91 -278 -109 -464 -59 -131 35 -183 41 -236 27 -75 -19 -115 -52 -150 -124 -30 -61 -32 -71 -28 -144 6 -97 36 -158 119 -238 71 -67 209 -135 321 -158 99 -20 253 -20 358 0 267 50 581 244 737 454 209 281 260 673 133 1013 -70 186 -311 431 -525 533 -206 98 -593 140 -925 99 -549 -68 -1041 -298 -1400 -654 -243 -242 -405 -492 -496 -769 l-37 -113 -56 6 c-135 13 -486 25 -753 25 -271 0 -289 1 -284 18 44 150 60 274 60 457 0 244 -33 410 -129 650 l-44 109 49 66 c252 342 406 715 456 1103 22 176 12 628 -15 627 -3 -1 -78 -27 -166 -59z m709 -3021 c88 -6 161 -11 162 -13 1 -1 -6 -42 -17 -92 -25 -119 -49 -305 -49 -377 0 -32 -3 -58 -6 -58 -3 0 -63 13 -132 29 -251 58 -593 119 -872 156 -69 9 -135 18 -147 21 -21 4 -20 8 32 117 29 61 61 138 71 169 18 53 21 57 54 62 57 7 732 -3 904 -14z m-604 -436 c173 -28 390 -71 666 -131 20 -5 21 -13 28 -166 27 -621 177 -1043 583 -1650 253 -378 580 -768 1023 -1222 273 -279 343 -357 438 -484 238 -315 387 -652 453 -1019 72 -406 36 -1045 -97 -1712 -160 -804 -476 -1596 -709 -1772 -91 -69 -196 -83 -285 -38 -126 65 -154 220 -111 605 12 105 37 318 56 475 62 523 75 690 75 955 0 641 -136 1169 -474 1844 -344 687 -592 1023 -1179 1597 -293 287 -426 407 -721 653 -143 120 -297 251 -340 292 -240 224 -359 512 -373 899 -4 114 -2 159 11 210 21 86 73 186 148 288 54 75 64 83 87 79 46 -10 341 -136 516 -222 207 -101 374 -196 564 -322 107 -71 146 -92 154 -84 8 8 8 14 2 19 -364 252 -809 488 -1172 621 -40 15 -60 27 -56 35 4 6 41 61 84 121 42 61 88 131 103 156 l26 46 143 -19 c78 -10 239 -34 357 -54z"/>
</g>
</svg>

借助CSS规则@keyframes和SVG属性，stroke-dashoffset我们可以开始绘制这个元素的动画。例如，像这样：

path {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 100000;
  stroke-dashoffset: 0;
  animation: dash 20s ease;
}
@keyframes dash {
  from {
    stroke-dashoffset: 100000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<svg width="280px" height="280px" viewBox="0 0 1046 1280">
<g transform="translate(0,1280) scale(0.1,-0.1)" fill="none" stroke="black" stroke-width="100">
<path d="M6125 12741 c-387 -139 -597 -254 -908 -495 -233 -181 -331 -236 -422 -236 -17 0 -69 11 -115 24 -115 33 -387 82 -540 97 -236 22 -573 0 -849 -56 -161 -33 -227 -39 -285 -25 -32 7 -108 48 -220 117 -381 238 -783 418 -1165 522 l-74 20 7 -87 c47 -605 193 -1137 396 -1443 l40 -60 -25 -65 c-38 -101 -93 -307 -116 -439 -18 -97 -22 -161 -23 -330 0 -213 11 -317 49 -441 26 -86 51 -79 -277 -76 -331 4 -697 -10 -1025 -38 -215 -19 -564 -59 -572 -66 -2 -2 -1 -9 2 -17 4 -11 27 -10 138 4 476 63 1214 101 1600 84 l167 -7 36 -87 c20 -47 55 -121 80 -163 l43 -77 -36 -5 c-20 -3 -92 -13 -161 -21 -513 -65 -1082 -183 -1506 -315 -194 -59 -234 -76 -234 -95 0 -8 1 -15 3 -15 2 0 57 18 122 40 266 90 566 168 900 234 276 55 413 76 891 141 l41 6 58 -77 c31 -42 88 -109 126 -149 l69 -72 -118 -43 c-265 -97 -648 -277 -882 -415 -179 -105 -370 -235 -370 -251 0 -8 4 -14 9 -14 4 0 69 40 142 89 339 225 742 426 1156 577 l93 33 93 -94 c214 -215 287 -380 287 -652 0 -260 -53 -544 -204 -1093 -70 -254 -124 -480 -156 -652 -157 -835 -108 -1553 159 -2358 89 -266 155 -431 312 -782 274 -611 310 -727 354 -1146 22 -205 36 -683 33 -1072 l-3 -345 -88 -7 c-109 -8 -232 -32 -290 -57 -66 -28 -111 -73 -143 -143 -26 -56 -29 -74 -29 -158 0 -74 4 -103 19 -129 67 -123 257 -196 611 -235 1310 -143 2603 -163 3865 -61 684 56 1558 169 1680 218 349 141 670 737 925 1721 185 712 354 1713 371 2201 24 650 -166 1275 -569 1880 -207 310 -356 484 -807 940 -477 483 -631 662 -805 935 -143 224 -273 537 -311 747 -35 198 -28 460 18 673 47 221 145 445 262 601 203 269 554 486 916 565 66 15 125 19 260 18 157 0 185 -3 274 -27 228 -61 359 -160 386 -292 26 -124 -55 -283 -190 -373 -135 -91 -278 -109 -464 -59 -131 35 -183 41 -236 27 -75 -19 -115 -52 -150 -124 -30 -61 -32 -71 -28 -144 6 -97 36 -158 119 -238 71 -67 209 -135 321 -158 99 -20 253 -20 358 0 267 50 581 244 737 454 209 281 260 673 133 1013 -70 186 -311 431 -525 533 -206 98 -593 140 -925 99 -549 -68 -1041 -298 -1400 -654 -243 -242 -405 -492 -496 -769 l-37 -113 -56 6 c-135 13 -486 25 -753 25 -271 0 -289 1 -284 18 44 150 60 274 60 457 0 244 -33 410 -129 650 l-44 109 49 66 c252 342 406 715 456 1103 22 176 12 628 -15 627 -3 -1 -78 -27 -166 -59z m709 -3021 c88 -6 161 -11 162 -13 1 -1 -6 -42 -17 -92 -25 -119 -49 -305 -49 -377 0 -32 -3 -58 -6 -58 -3 0 -63 13 -132 29 -251 58 -593 119 -872 156 -69 9 -135 18 -147 21 -21 4 -20 8 32 117 29 61 61 138 71 169 18 53 21 57 54 62 57 7 732 -3 904 -14z m-604 -436 c173 -28 390 -71 666 -131 20 -5 21 -13 28 -166 27 -621 177 -1043 583 -1650 253 -378 580 -768 1023 -1222 273 -279 343 -357 438 -484 238 -315 387 -652 453 -1019 72 -406 36 -1045 -97 -1712 -160 -804 -476 -1596 -709 -1772 -91 -69 -196 -83 -285 -38 -126 65 -154 220 -111 605 12 105 37 318 56 475 62 523 75 690 75 955 0 641 -136 1169 -474 1844 -344 687 -592 1023 -1179 1597 -293 287 -426 407 -721 653 -143 120 -297 251 -340 292 -240 224 -359 512 -373 899 -4 114 -2 159 11 210 21 86 73 186 148 288 54 75 64 83 87 79 46 -10 341 -136 516 -222 207 -101 374 -196 564 -322 107 -71 146 -92 154 -84 8 8 8 14 2 19 -364 252 -809 488 -1172 621 -40 15 -60 27 -56 35 4 6 41 61 84 121 42 61 88 131 103 156 l26 46 143 -19 c78 -10 239 -34 357 -54z"/>
</g>
</svg>

此动画将在文档加载后立即开始。

问题：如何开始绘制带有页面滚动锚点的 SVG 元素的动画？

有兴趣通过问题标签中指示的任何方式和技术详细描述此类实现和实现本身。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-18 18:57:30 +0000 UTC
  • 2

我对@UModeL的工作很感兴趣，他使用 CSS 技术绘制了一个圆形菜单。

这是他对如何用圆线（不是角）制作三角形的问题的回答：

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

ul {
  position: relative;
  height: 90vw; max-height: 90vh;
  width: 90vh; max-width: 90vw;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  list-style-type: none;
  box-shadow: 0 0 0 5px violet;
}

li {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 50%; width: 50%;
  transform-origin: 100% 100%;
  transform: rotate(0deg) skewy(30deg);
  box-shadow: inset 0 0 15px 0px violet;
  background-image: linear-gradient(to right bottom, black, blue);
  cursor: pointer;
  transition: 0.8s ease-out;
}
li:nth-child(2) { transform: rotate(60deg) skewy(30deg); }
li:nth-child(3) { transform: rotate(120deg) skewy(30deg); }
li:nth-child(4) { transform: rotate(180deg) skewy(30deg); }
li:nth-child(5) { transform: rotate(240deg) skewy(30deg); }
li:nth-child(6) { transform: rotate(300deg) skewy(30deg); }

ul:hover li:not(:hover) {
  box-shadow: inset 0 0 3px 0px violet;
  transition: 0.6s ease-in-out;
}
li:hover {
  box-shadow: inset 0 0 25px 10px violet;
  transition: 0.4s ease-in-out;
}

li a {
  margin: 20% 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 33%; width: 33%;
  border-radius: 50%;
  font: bold 100%/1em sans-serif;
  text-decoration: none;
  transform: skewy(-30deg) rotate(0deg);
  color: white;
  box-shadow: inset 0 0 5px 5px violet;
  transition: 0.4s ease-in-out;
}
li:nth-child(2) a { transform: skewy(-30deg) rotate(-60deg); }
li:nth-child(3) a { transform: skewy(-30deg) rotate(-120deg); }
li:nth-child(4) a { transform: skewy(-30deg) rotate(-180deg); }
li:nth-child(5) a { transform: skewy(-30deg) rotate(-240deg); }
li:nth-child(6) a { transform: skewy(-30deg) rotate(-300deg); }

li:hover a {
  color: violet; box-shadow: inset 0 0 5px 5px white;
}
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
</ul>

作者：@UModel

问题：是否有可能使用任何其他方法和技术来绘制和创建问题标签中指出的类似动画效果？

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-15 00:57:54 +0000 UTC
  • 2

我有一张带点（标记）的地图：

.map {position: relative; width: 800px; height: 506px;}
.dot {display: block; position: absolute; width: 30px; height: 30px; background-color: gold; border-radius: 30px; cursor: pointer; text-align: center; line-height: 30px;}
.dot:hover::before {content: ""; position: absolute; top: -10px; left: -10px; width: 50px; height: 50px; border-radius: 50px; background-color: gold; animation: animate 1.5s infinite normal ease-out;
}
@keyframes animate {from {transform: scale(0); opacity: .5}to {transform: scale(2); opacity: 0;}}

.aa {top: 440px; left: 260px;}
.bb {top: 320px; left: 380px;}
.cc {top: 260px; left: 240px;}

.win {display: none; position: absolute; top: 150px; left: 200px; width: 200px; height: 50px; background: pink; border: 1px solid black; padding: 5px;}

.close {position: absolute; top: -1px; right: -1px; border: 1px solid black; padding: 5px 10px; cursor: pointer;}
<div class="map">
  <img src="https://isstatic.askoverflow.dev/0lfnZ.jpg">
  <span class="dot aa">A</span>
  <span class="dot bb">B</span>
  <span class="dot cc">C</span>
</div>

<div class="win ab">Окно AB<span class="close">X</span></div>
<div class="win ac">Окно AC<span class="close">X</span></div>

<div class="win ba">Окно BA<span class="close">X</span></div>
<div class="win bc">Окно BC<span class="close">X</span></div>

<div class="win ca">Окно CA<span class="close">X</span></div>
<div class="win cb">Окно CB<span class="close">X</span></div>

问题：选择两个点时如何显示隐藏元素？更详细地说，场景如下：

  1. 当您单击一个点（例如，点A）时，它被选中。当您再次单击同一点时，我们会删除选择。⇒ 结果什么也没发生。

1.1。我们可以选择一个点并取消选择它，例如，使用javascript, 通过在单击附加类的元素时添加/删除：

let items;
let item;
window.addEventListener('load', () => {
  dots = document.getElementsByClassName('dot');
  for(let dot of dots) {
    dot.addEventListener('click', () => {
      //for(let it of dots) it.classList.remove('active');
      dot.classList.toggle('active')
    });
  }
});
.map {position: relative; width: 800px; height: 506px;}
.dot {display: block; position: absolute; width: 30px; height: 30px; background-color: gold; border-radius: 30px; cursor: pointer; text-align: center; line-height: 30px;}
.dot:hover::before {content: ""; position: absolute; top: -10px; left: -10px; width: 50px; height: 50px; border-radius: 50px; background-color: gold; animation: animate 1.5s infinite normal ease-out;
}
@keyframes animate {from {transform: scale(0); opacity: .5}to {transform: scale(2); opacity: 0;}}

.aa {top: 440px; left: 260px;}
.bb {top: 320px; left: 380px;}
.cc {top: 260px; left: 240px;}

.active {background-color: red;}
<div class="map">
  <img src="https://isstatic.askoverflow.dev/0lfnZ.jpg">
  <span class="dot aa">A</span>
  <span class="dot bb">B</span>
  <span class="dot cc">C</span>
</div>

  1. 当您单击一个点（例如，点A）时，它被选中。我们点击另一个点（例如点B），它也被选中 ⇒ 结果显示了一个隐藏元素。

2.1。选择点时：
A和B- 具有类的元素.ab
A和- 具有类C的元素和 - 具有类的元素.ac
B和- 具有类的元素和- 具有类的元素并且-显示具有类的元素A.ba
BC.bc
CA.ca
CB.cb

  1. 当您单击<span class="close">X</span>每个隐藏元素中的十字 ( ) ⇒ 元素被隐藏，并且从选定的点中删除高光。
javascript
Martin Hope
Sevastopol'
Asked: 2022-04-14 22:17:13 +0000 UTC
  • 1

有两个点 (A和B) 和一条从一个点到另一个点的贝塞尔曲线。当点击一个点时A，我们开始animateMotion动画元素沿着移动路径从一个点移动到另一个A点B。

<svg id="svg" width="500" height="300" viewBox="15 15 150 50">

  <circle id="a" cx="26.5" cy="13.2" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  <circle id="b" cx="87.3" cy="23.8" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <text y="15" x="18" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">A</text>
  <text y="26" x="92" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">B</text>

  <path d="m 26.458333,13.229167 c 2.776366,16.871891 9.790064,18.199908 18.520833,13.229166 L 63.499999,13.229167 C 77.382834,4.1082137 88.663388,0.52362484 87.312499,23.8125 v 0" stroke="cornflowerblue" stroke-width="1" fill="none" id="mPath"></path>
  
  <circle id="c" cx="" cy="" r="2" fill="green">
    <animateMotion begin="a.click" dur="1.5s" repeatCount="1" fill="freeze">
      <mpath xlink:href="#mPath"></mpath>
    </animateMotion>
  </circle>
  
</svg>

问题：如何实现一个附加动画，即点击一个点时，B启动元素沿着移动路径从一个点B到另一个点移动的动画A？为了不混淆，我更详细地解释了这个问题：

  1. 当点击一个点时A，我们开始动画元素沿着移动路径从一个点移动到另一个A点B。
  2. 当点击一个点时B，我们开始动画元素沿着移动路径从一个点移动到另一个B点A。
  3. 这不是逆转。这不是一次往返。两个动画都是独立的，彼此不相关。它们仅通过path点之间的路径 ( ) 连接。

在这方面，出现了一个相当可预测的问题：如果它们有一个路径（ ），那么对于从点到点path的动画，是否需要另外添加相同的路径？但是，如果现有的已经有一个起点，一个终点，一个线段，并且所有这些都是从一个点到另一个点，那么如何绘制相同的路径（时间不与坐标迷路？BAABpath

有兴趣通过问题标签中指示的任何方式和技术详细描述此类实现和实现本身，这可以是 and CSS, and SMIL SVG, 以及使用 and JavaScript。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-14 21:14:17 +0000 UTC
  • 3

我有两个点 (A和B) 和连接它们的贝塞尔曲线。线条绘制动画在文档加载后立即开始。

svg path {
  fill: none;
  stroke: cornflowerblue;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: path 5s linear forwards;
}
@keyframes path {
  to {
    stroke-dashoffset: 0;
  }
}
<svg width="500" height="300" viewBox="15 15 150 50">

  <circle id="a" cx="26.5" cy="13.2" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  <circle id="b" cx="87.3" cy="23.8" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <text y="15" x="18" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">A</text>
  <text y="26" x="92" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">B</text>

  <path d="m 26.458333,13.229167 c 2.776366,16.871891 9.790064,18.199908 18.520833,13.229166 L 63.499999,13.229167 C 77.382834,4.1082137 88.663388,0.52362484 87.312499,23.8125 v 0"stroke="cornflowerblue" stroke-width="1" fill="none" id="mPath"></path>

</svg>

问题：如何在单击某个点时开始绘制一条线的动画A？有兴趣通过问题标签中指示的任何方式和技术详细描述此类实现和实现本身，这可以是 and CSS, and SMIL SVG, 以及使用 and JavaScript。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-10 00:48:07 +0000 UTC
  • 1

我有以下地图图像：

地图

任务：我需要使用使之成为可能的手段和技术来绘制这样的地图，并在其上放置点（标记），以指示城市。此外，单击标记时，应出现带有城市名称的弹出提示（工具提示）。

  1. 如果无法使用代码再现（绘制）地图，则允许使用其图像。这可以通过两种方式完成：通过应用属性将其用作背景图像，background或者使用标签将其作为带有图像的文件插入，<img>通过src.

变体background：

div {
  width: 800px;
  height: 506px;
  background: url(https://isstatic.askoverflow.dev/0lfnZ.jpg);
}
<div></div>

使用标签的变体<img>：

<img src="https://isstatic.askoverflow.dev/0lfnZ.jpg">

  1. 有必要通过表示城市的坐标点（标记）在此地图上放置。怎么可能做到这一点？

这是标记代码：

span {
  display: block;
  position: relative;
  margin: 30px auto;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 10px;
  cursor: pointer;
}

span:hover::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background-color: red;
  animation: animate 1.5s infinite normal ease-out;
}

@keyframes animate {
  from {
    transform: scale(0);
    opacity: .5
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}
<span></span>

以下是城市列表：

<p>Севастополь</p>
<p>Симферополь</p>
<p>Евпатория</p>
<p>Феодосия</p>
<p>Керчь</p>
<p>Ялта</p>

  1. 单击标记时，工具提示应显示城市名称。怎么可能做到这一点？例如，这样的工具提示应该如下所示（它的形状、颜色、大小无关紧要），如下所示：

线索

建议通过任何方式并借助问号中指示的任何技术来解决问题。特别欢迎对您的实现进行详细描述。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-07 23:58:55 +0000 UTC
  • 8

我在隧道的开头有以下球代码：

body {
  margin: 0; padding: 0; min-height: 100vh;
  display: flex; align-items: center;
}

.container {
  width: 100%; height: 160px;
  background: #fbf2d4;
}

.ball {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #f48024;
}
<div class="container">
  <div class="ball"></div>
</div>

可以通过什么手段和技术来实现小球沿给定轨迹在某个隧道内运动的动画，如下图所示？

球沿给定轨迹的动画

需要播放此动画。但是，在这样做之前，您需要了解为什么要开始以应用所选技术的必要手段。这是否是球移动的给定轨迹。或者它是一个从上下墙壁反弹的飞球。对于答案，这个选择无关紧要。最重要的是创建此类动画效果的实现及其详细说明。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-06 23:25:13 +0000 UTC
  • 4

以下线性渐变用作主要背景图像：

html, body, svg {margin: 0; padding: 0; width: 100%; height: 100vh;}
<svg id="svg">
<defs>
<linearGradient id="gradient">
<stop offset="0" stop-color="brown"/>
<stop offset="2" stop-color="chocolate"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100vh" fill="url(#gradient)"/>

众所周知，渐变是从一种颜色到另一种颜色的平滑过渡。它们之间可以有多种颜色和过渡。在此示例中，仅使用了两种颜色 - 棕色和巧克力色。

我需要实现这个渐变的动画。您需要开始一个分离的垂直白色条带，该条带将从左向右移动，然后向相反方向移动。因此，从一个边缘移开，该条带将与它一起拉动渐变，从而以从一种颜色到白色的平滑过渡填充主背景。然后在相反的方向，用从另一种颜色到白色的平滑过渡填充主背景。

坡度

动画脚本：

  1. 垂直的白色条纹从左向右移动，以从棕色到白色的平滑过渡填充主背景；
  2. 一条垂直的白色条纹从右向左移动，以从巧克力色到白色的平滑过渡填充主背景；
  3. 动画正在循环播放。

这是此类动画最简单的场景。但是，如果可能的话，那么我想使这种情况复杂一点：

  1. 垂直的白色条纹从左向右移动，以从棕色到白色的平滑过渡填充主背景。在此动画期间，主背景图像被转换为​​顺时针方向的 360度旋转；
  2. 垂直的白色条纹从右向左移动，以从巧克力色到白色的平滑过渡填充主背景。在此动画期间，主背景图像转换为 360o逆时针旋转；
  3. 动画正在循环播放。

建议通过问题标签中指示的任何方式来实现这样的动画，即两者CSS，SMIL SVG和使用JavaScript（这可以是 Canvas - 使用编程语言 - JavaScript 的 HTML 元素）。

javascript
Martin Hope
Sevastopol'
Asked: 2022-04-06 01:11:03 +0000 UTC
  • 7

数学钟摆是一个振荡器，它是一个机械系统，由一个无重量的不可伸展线或光杆末端的质点组成，并位于一个均匀的重力场中。螺纹（杆）的另一端通常是固定的。（有关详细信息，请参阅维基百科参考）

数学钟摆

我对@Alexandr_TT提出的问题（牛顿的摇篮，演示此效果的动画）感兴趣，有必要创建一个演示此物理体验的动画，对此我有一个反问。

这是平衡位置处的数学钟摆的代码CSS：

/*Маятник*/

.newton_cradle {
  position: relative;
  margin: 0 auto;
  margin-top: 90px;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: repeating-linear-gradient( 45deg, black, transparent 100px);
  background: radial-gradient(circle at 65% 15%, white 1px, lightgray 3%, gray 60%, lightgray 100%);
  box-shadow: 1px 5px 10px 3px rgb(0 0 0 / 10%);
}


/*Украшательства маятника*/

.newton_cradle::before {
  content: '';
  display: block;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: white;
  filter: blur(10px);
}


/*Нить*/

.newton_cradle::after {
  content: '';
  display: block;
  position: absolute;
  top: -90px;
  left: 48px;
  height: 90px;
  width: 2px;
  background: gray;
}
<div class="newton_cradle"></div>

这是平衡位置处的数学钟摆的代码SMIL SVG：

<svg id="svg" viewBox="-100 45 220 45" height="280px" width="500px">

<g>
  <!--Маятник-->
  <circle r="20" cy="67" cx="31.75" fill="url(#gr)" stroke="none" stroke-width="4.99999" />
  <!--Нить-->
  <path transform="scale(0.26458333)" d="M 120 40 L 120 180 L 120 40 z" fill="none" stroke="dimgray" stroke-width="2px" />
</g>

<!--Украшательства маятника-->
<radialGradient id="gr" r="100%" fx="30%" fy="30%"><stop stop-color="white" offset="10%"></stop><stop stop-color="darkgray" offset="45%"></stop><stop stop-color="gray" offset="100%" stop-opacity="0"/></radialGradient>

</svg>

问题：
如上图所示，如何播放钟摆沿半径圆弧摆动的动画？与垂直方向的偏差角度无关紧要。在实现中要理解的最重要的事情是如何通过这样的动画使不可扩展的线程（杆）的一端（旋转中心）保持静止。有兴趣详细描述这种通过手段和技术创建动画和转换效果的CSS实现SMIL SVG。

css3
Martin Hope
Sevastopol'
Asked: 2022-03-07 02:51:20 +0000 UTC
  • 6

我们有以下HTML+CSS代码：

function parentH() {
  let height = document.querySelector('#parent_range_H').value + 'px';
  document.querySelector('#parent').style.height = height;
  document.querySelector('#children').style.height = height;
}

function parentW() {
  let width = document.querySelector('#parent_range_W').value + 'px';
  document.querySelector('#parent').style.width = width;
  document.querySelector('#children').style.width = width;
}
#parent {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 5px solid red;
}

#children {
  width: 100%;
  height: 100%;
  background: green;
}
<p>Изменяем высоту (H) родителя: <input id="parent_range_H" type="range" min="10" max="300" value="300" step="1" name="parent_h" oninput="parentH()"></p>
<p>Изменяем ширину (W) родителя: <input id="parent_range_W" type="range" min="10" max="300" value="300" step="1" name="parent_w" oninput="parentW()"></p>

<div id="parent">
  <div id="children"></div>
</div>

父元素<div id="parent">具有相同的宽度300px和高度尺寸300px，形成一个正方形。子元素的尺寸是其父元素尺寸<div id="children">的百分比（宽度 -100%和高度 - ），完全填满其所有空间，也形成一个正方形。100%当更改父元素的大小时，子元素会自动减小其大小，调整到其父元素的大小，从而违反其比例 - 正方形。

问题：在调整父元素的大小时，如何按比例调整子元素的大小？子元素必须是完全响应的正方形，并且对于父元素的高度或宽度的任何变化，子元素 - 正方形 - 必须始终保持为正方形。解决这个问题有哪些选择？

javascript
Martin Hope
Sevastopol'
Asked: 2022-03-02 19:44:18 +0000 UTC
  • 3

我对@CbIPoK2513的工作很感兴趣，他使用 CSS 技术创建了一个坐标网格，使用绝对测量单位 - 像素 (px)。

这是他对如何制作自适应坐标网格的答案的第一部分：

body {
  
  --wM: 1px;        /* Толщина линии */
  --xM: 10px;       /* Отступ по ширине */
  --yM: 10px;       /* Отступ по высоте */
  --cM: #ccc;       /* Цвет линии */
  
  --wB: 1px;        /* Толщина линии */
  --xB: 100px;      /* Отступ по ширине */
  --yB: 100px;      /* Отступ по высоте */
  --cB: #333; /* Цвет линии */
  
  background-position: -1px 0;
  background-image:
    linear-gradient(90deg, var(--cB) var(--wB), transparent var(--wB)),
    linear-gradient(0deg, var(--cB) var(--wB), transparent var(--wB)),
    linear-gradient(90deg, var(--cM) var(--wM), transparent var(--wM)),
    linear-gradient(0deg, var(--cM) var(--wM), transparent var(--wM));
  background-size: 
    var(--xB) 100%, 100% var(--yB),
    var(--xM) 100%, 100% var(--yM);
}

#block {
  width: 150px;
  height: 150px;
  border: 1px solid red;
  box-sizing: border-box;
  position: absolute;
  left: 100px;
  top: 50px;
}
<div id="block"></div> <!-- Для примера -->

作者：@CbIPoK2513

为方便起见，在调试和布局网页的各种设计元素时，使用这样的坐标网格作为背景（基板），以及展示这些元素的透明度。例如，@UModeL 贡献者在他的工作（答案）中使用了他自己在位图编辑器中绘制的图像。以下是此类用法的示例：

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: url("https://isstatic.askoverflow.dev/m9NKc.png") 0% 0% no-repeat #eee;
}

问题：是否有其他选项可以使用问号中指示的任何其他方式和技术创建类似的坐标网格？

javascript
Martin Hope
Sevastopol'
Asked: 2020-06-04 18:53:04 +0000 UTC
  • 2

该页面包含.container带有嵌套元素的块。任务是仅显示块中的前 3 个元素。如果块中的元素超过三个，则隐藏其余元素并显示一个链接，其中包含隐藏在块中的元素数量。您能告诉我如何实施吗？谢谢

$(document).ready(function() {
  $('.container').find('span:gt(2)').hide()
  $('.container').append('<div class="add">Ещё</div>');
  $('.add').append('<div class="number_hidden"></div>');
  $(".number_hidden").text($(".container span").length)
});
$(".add").click(function() {
  $(".container").find('span').show();
});
.container span {display: inline-block; margin: 5px; width: 20px; height: 20px; border: 1px solid black;}

.add {display: inline-block; border: none; cursor: pointer;}

.number_hidden {display: inline-block; border: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

javascript
Martin Hope
Sevastopol'
Asked: 2020-06-03 21:04:04 +0000 UTC
  • 1

今天是个好日子。我有几个问题，请帮忙：

单击元素时如何a.knopka禁用多个添加<div class="block_ul"><ul><li></li></ul></div>？

当点击一个元素时，.close除了 class 之外，如何删除knopka_active添加它<div class="block_ul"><ul><li></li></ul></div>的所有元素a.knopka？

谢谢

$("a.knopka").on("click", function() {
  $(this).addClass('knopka_active').append('<div class="block_ul"><ul><li></li></ul></div>');
});

$(".close").on("click", function() {
  $("a.knopka").removeClass('knopka_active');
});
.knopka {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
.knopka_active {
  border: 2px solid red;
}
.block_ul ul {
  list-style: none; margin: 0; padding: 0;
}
.block_ul li {
  display: inline-block;
  margin: 0; padding: 0;
  width: 10px;
  height: 10px;
  border: 1px solid green;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid chocolate;
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#" class="knopka"></a>
<a href="#" class="knopka"></a>
<a href="#" class="knopka"></a>

<div class="close">Отмена</div>

javascript