主页 / user-28748

Alexandr_TT's questions

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

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

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

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

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

// 创建二维码

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<body>

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

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

</body>
</html>

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

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

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

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

下面是我的代码：

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

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

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

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

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

javascript
Martin Hope
Alexandr_TT
Asked: 2022-07-23 00:43:57 +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 徽标颜色的 松散翻译问题。

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

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

在此处输入图像描述

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

可视化脚本：

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

获胜者选择标准

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

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

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

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

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

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

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

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

问题：

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

在此处输入图像描述

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

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

path.grey {
  stroke: #e7e7e8;
}

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

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

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

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

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

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

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

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

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

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

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

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

在此处输入图像描述

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

javascript
Martin Hope
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绘制鼠标轨迹时 如何影响画布后面的悬停元素的问题的松散翻译。

javascript
Martin Hope
Alexandr_TT
Asked: 2022-04-16 18:40:17 +0800 CST
  • 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的剪裁边缘问题。

html
Martin Hope
Alexandr_TT
Asked: 2022-04-16 17:24:49 +0800 CST
  • 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。

html
Martin Hope
Alexandr_TT
Asked: 2022-04-16 01:42:24 +0800 CST
  • 4

我有两个图标：一个处于原始状态，第二个图标被划掉。

我想为删除线设置动画，但更改dash-offset它并没有帮助，因为它们是两个不同的 svg。

我正在看这些动画图标，但仍然无法弄清楚神奇的部分。

在此处输入图像描述

我想问：过渡过程应该是怎样的？
我更喜欢使用pure CSS，可以吗？

@Mengo对图标​​问题的 SVG 线交叉动画的松散翻译。

css
Martin Hope
Alexandr_TT
Asked: 2022-04-10 00:44:25 +0800 CST
  • 5

我有一个凸轮机构的 GIF：

在此处输入图像描述

该图显示，随着安装有凸轮的轴的均匀旋转，推动器接收推动器的不均匀往复运动，推动器在凸轮表面上滑动。

我再现了这个机制的主要轮廓。

在此处输入图像描述

这是我的静态机制代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet"  id="svg4" width="390" height="700" viewBox="0 0 390 700">
  
           <!-- Верхняя скоба -->
 <g stroke="#717171" stroke-width="2" fill="none" > 
  <path d="M149 124h87v31h-87z"   />
  <path d="M175 124v31"    />
  <path d="M210 124v31"    />
  <path d="M161 134c3 0 6 3 6 6s-3 6-6 6c-2 0-5-4-5-6 0-3 3-6 5-6z"/>
   <path d="M221 134c3 0 6 3 6 6s-3 6-6 6c-2 0-5-4-5-6 0-3 3-6 5-6z"  />
  </g>
   
             <!-- Нижняя скоба -->
 <g stroke="#717171" stroke-width="2" fill="none" > 
 
  <path id="circ910" d="M221 278c3 0 6 3 6 6s-3 6-6 6c-2 0-5-4-5-6 0-3 3-6 5-6z"/>
  <path id="circ912" d="M161 278c3 0 6 3 6 6s-3 6-6 6c-2 0-5-4-5-6 0-3 3-6 5-6z"/> 
    <path d="M149 267h87v31h-87z"  />
    <path d="M175 267v31" id="path916" />
    <path  d="M210 267v31" id="path918"  /> 
   </g>
                 <!-- Кулачок -->
        <g  ig="gr1"  stroke-width="2"   >
   <path id="cam" fill="#8080B1" stroke="black" fill-opacity="0.5" d="M83 493c1-7 19-23 32-30 10-6 34-10 34-10 6-5 35-42 59-48 21-5 60-15 65-10 11 15 21 57 10 93-4 12-10 27-18 39-5 8-14 14-20 22l-5 9s-4 12-4 19c0 20-9 36-20 49-10 12-32 26-39 24-6-1-21-18-28-30-13-21-22-38-24-69 0-4-19-14-26-23-7-10-17-27-16-35z" />  
   
   <circle id="path866" cx="192" cy="514.6" r="36" fill="#5F5F5F" stroke="black"  stroke-width="2"  />
    <circle id="spindle" cx="192" cy="514.6" r="20" fill="#4A4A4A" stroke="black"  stroke-width="2" />
                   <!-- Шпонка -->
      <path id="key" fill="#151515" stroke="black" d="M189 491h6v10h-6v-10h6"  />  
        
      </g>  
                      <!-- Толкатель -->
  <path id="kernel" d="M184 60v340l8 14 7-14V59z"  fill="none" stroke="red" stroke-width="2" >
      
  </path>
  <circle id="path868" cx="192" cy="514.4" r="144.7" opacity=".5" fill="none" fill-opacity="1" stroke="#1515B1" stroke-width="2" />
  
  
</svg>

我试图制作凸轮机构的动画：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet"  id="svg4" width="390" height="700" viewBox="0 0 390 700">
 
  
 
           <!-- Верхняя скоба -->
 <g stroke="#717171" stroke-width="2" fill="none" > 
  <path d="M149 124h87v31h-87z"   />
  <path d="M175 124v31"    />
  <path d="M210 124v31"    />
  <path d="M161 134c3 0 6 3 6 6s-3 6-6 6c-2 0-5-4-5-6 0-3 3-6 5-6z"/>
   <path d="M221 134c3 0 6 3 6 6s-3 6-6 6c-2 0-5-4-5-6 0-3 3-6 5-6z"  />
  </g>
   
             <!-- Нижняя скоба -->
 <g stroke="#717171" stroke-width="2" fill="none" > 
 
  <path id="circ910" d="M221 278c3 0 6 3 6 6s-3 6-6 6c-2 0-5-4-5-6 0-3 3-6 5-6z"/>
  <path id="circ912" d="M161 278c3 0 6 3 6 6s-3 6-6 6c-2 0-5-4-5-6 0-3 3-6 5-6z"/> 
    <path d="M149 267h87v31h-87z"  />
    <path d="M175 267v31" id="path916" />
    <path  d="M210 267v31" id="path918"  /> 
   </g>
  
          <g  ig="gr1"  stroke-width="2"   >  
                    <!-- Кулачок -->
   <path id="cam" fill="#8080B1" stroke="black" fill-opacity="0.5" d="M83 493c1-7 19-23 32-30 10-6 34-10 34-10 6-5 35-42 59-48 21-5 60-15 65-10 11 15 21 57 10 93-4 12-10 27-18 39-5 8-14 14-20 22l-5 9s-4 12-4 19c0 20-9 36-20 49-10 12-32 26-39 24-6-1-21-18-28-30-13-21-22-38-24-69 0-4-19-14-26-23-7-10-17-27-16-35z" />  
                         <!-- Вал -->
   <circle id="path866" cx="192" cy="514.6" r="36" fill="#5F5F5F" stroke="black"  stroke-width="2"  />
    <circle id="spindle" cx="192" cy="514.6" r="20" fill="#4A4A4A" stroke="black"  stroke-width="2" />
    
      <path id="key" fill="#151515" stroke="black" d="M189 491h6v10h-6v-10h6"  />  
                             <!-- Анимация вращения вала с кулачком -->
       <animateTransform attributeName="transform" type="rotate" begin="0s" dur="2s" values="0 192 514.6;360 192 514.6" repeatCount="indefinite" />  
      
     </g>  
                            <!-- Толкатель -->
  <path id="kernel" d="M184 60v340l8 14 7-14V59z"  fill="none" stroke="red" stroke-width="2" >
                          <!-- Анимация перемещения толкателя -->
      <animateTransform attributeName="transform" type="translate" begin="0s" dur="2s" calcMode="linear" 
         values="0 0;0 30;0 0"  repeatCount="indefinite" />  
  </path>
  <circle id="path868" cx="192" cy="514.4" r="144.7" fill="none" fill-opacity="1" stroke="#1515B1" stroke-width="2" />
  
  
</svg>

从程序的工作中可以看出，虽然动画的开始时间和持续时间是一样的，但无法实现凸轮的转动和推杆的往复运动的协调动作。

如何协调凸轮旋转的动画和推杆的不均匀运动，这取决于凸轮的表面轮廓。

javascript
Martin Hope
Alexandr_TT
Asked: 2022-04-03 04:08:15 +0800 CST
  • 5

该问题由一个问题和一个答案引发，其中实施了行人与交通信号灯交互的逻辑：

行人：

  • 站在斑马边时：黄灯或红灯亮
  • 只在红绿灯的绿灯处过马路

汽车

  • 在绿灯下穿过人行横道
  • 站在红绿灯的红灯处

在此处输入图像描述

由于在此应用程序中，从路边看不到车辆的红绿灯处打开了哪个信号，因此可以稍微简化一下条件：行人从人行横道一侧进入绿灯并站在红灯处光。汽车从人行横道一侧在红灯处开始移动，因为从路边为他们打开绿灯。

在应用程序中实现了人们在绿灯时穿过人行横道的条件。汽车的绿色许可信号在行人的红色信号之后亮起：

编辑器中的 168 行

<animate id="bigRed" attributeName="r" begin="startRed.begin" dur="0.1s" to="28" fill="freeze" /> 
     <animate id="smallRed" attributeName="r" begin="bigRed.end+5s" dur="0.1s" to="20" fill="freeze" />

但无法计算汽车何时会出现在红绿灯前。因为它在滚动时发生沿轨道的移动。（转动鼠标滚轮移动汽车）
但是当两个条件同时触发时它应该停止（滚动将停止工作）：

  1. 到达人行横道区后，距离斑马线 10px - 50px
  2. 并且为行人开绿灯

换句话说，如果汽车远离人行横道，那么它可以在任何行人交通信号灯处移动，并在路边红灯的斑马处停下（行人绿灯）

在此处输入图像描述

在smil SVG中，当两个条件结合时（汽车的位置在斑马和红绿灯处）是无法控制动画的

如果您只设置一个条件 - 十字路口的红灯，那么当触发红灯时，汽车将停在路线上的任何地方。

应用程序的源代码，其中包含行人在绿色上过马路的实现逻辑。

转动车轮移动汽车（不要推人）

// Первоначально установить автомобиль
MoveScroll();
function MoveScroll() {
  var scrollY = window.scrollY || window.pageYOffset;
  var maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
  var path = document.getElementById("mPath");
  // Рассчитать расстояние по пути, на котором машина должна быть для текущего количества прокрутки
  var pathLen = path.getTotalLength();
  var dist = pathLen * scrollY / maxScrollY;
  var pos = path.getPointAtLength(dist);
  // Вычислить положение немного впереди машины (или позади, если мы в конце), чтобы мы могли рассчитать угол автомобиля.
  if (dist + 1 <= pathLen) {
    var posAhead = path.getPointAtLength(dist + 1);
    var angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
  } else {
    var posBehind = path.getPointAtLength(dist - 1);
    var angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
  }
  // Поместите автомобиль в "pos", повернутый на "angle".
  var car = document.getElementById("car");
  car.setAttribute("transform", "translate(" + pos.x + "," + pos.y + ") rotate(" + rad2deg(angle) + ")");
}

function rad2deg(rad) {
  return 180 * rad / Math.PI;
}

// Передвигать автомобиль всякий раз, когда есть событие прокрутки
window.addEventListener("scroll", MoveScroll);
<!-- https://ru.stackoverflow.com/q/1278377/28748 -->
<style>
body {
  min-height: 30000px;
}
.container {
width:100vw;
height:100vw;
}
svg {
  position: fixed;
}
</style>
<div class="container">
<svg id="svg1" viewBox="0 80 1840 1035" preserveAspectRatio="xMinYMin meet">
<defs>

   <path id="walk1"
   d="m343 268 34-10 50-9-33-86 22-14 7-21 8-3 13 18 34-25 47 65 22-19"  />
  <g id="Man" transform="translate(0,0) scale(1,-1)">
    <path   fill="none">
         <animate
          attributeName="d"
          begin="0.1s"
          dur="0.3s"
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path> 
      </g>  
        <!-- Трасса в школу через пешеходный переход  -->
 <path id="child"  fill="none" stroke="none" d="m328 893 1-212M344 864" /> 
       <!-- Трасса в палатку через пешеходный переход  -->
   <path id="home1"  fill="none" stroke="none" d="m 344.35582,863.69183 c 0,0 -34.63139,-111.56426 0,-145.53606 29.52729,-28.96492 84.99455,-11.19516 124.06352,2.38584 15.72518,5.46632 24.12207,24.52029 39.76395,30.2206 78.91988,28.76045 173.36704,37.53827 258.46569,18.29141" /> 
    <path id="child2"  fill="none" stroke="none" d="m309 874c0 0-13-111 2-157 2-6 14 0 17-5 6-8 1-30 1-30" />  
    <!-- Трасса2 из палатки через пешеходный переход  -->
    <path id="home2" d="m 876.39749,779.39226 c 0,0 -307.5863,30.55405 -455.69489,-3.18112 -25.43694,-5.79386 -49.02287,-47.7976 -70.77983,-33.40172 -33.85116,22.39822 4.77167,121.67769 4.77167,121.67769" style="fill:none;stroke-width:2;stroke:#e02e2e"/>  
     <!-- Трасса из школы через пешеходный переход     -->
      <path id="back" d="m329 682c0 0-23 32-25 41-13 54 14 143 14 143" style="fill:none;stroke-width:2;stroke:#da3434"/>
    
  </defs>
  <!--Карта-->
  <g id="map" x="0" y="0" transform="scale(1) translate(0,0)">
    <image href="https://i.imgur.com/uTmJYO7.png">
    </image>
  </g>

 

<!--Путь-->
<path id="mPath" fill="none" stroke="none" stroke-width="1px" d="M-99.9 458.3C405 455.9 909.9 453.5 1168.1 451.5c258.3-2 269.8-3.7 284-9 14.2-5.3 31-14.2 44.5-25.7 13.5-11.5 24-25.7 30.9-40 6.9-14.3 10.3-28.6 12-52.9 1.7-24.3 1.7-59-0.7-82.6-2.4-23.5-7.2-36.5-14.1-48.6-6.8-12.1-15.9-23.8-27.6-34.1-11.7-10.3-26-19.2-41-25.4-15.1-6.2-30.4-9.6-69.2-10.9-38.8-1.4-100.8-0.8-138.2 3.2-37.4 4-50.2 11.4-61.6 19.2-11.5 7.9-21.6 16.3-31 28.1-9.4 11.9-17.9 27.2-23.1 42.3-5.2 15.1-7 29.8-6.3 113.4 0.7 83.6 3.9 235.9 2.4 318.2-1.5 82.3-7.7 94.4-13.2 104.4-5.5 9.9-10.6 17.8-19.2 27.4-8.6 9.6-20.7 20.9-34.1 29.3-13.4 8.4-27.9 13.8-167.6 16.5-139.7 2.7-404.5 2.7-542.3 1.2-137.8-1.5-149-4.5-161.3-10.4-12.4-5.9-26.1-14.7-37.6-26.8-11.5-12.2-20.6-27.7-26.5-41.9-5.9-14.1-8.5-26.9-9.7-101.5-1.2-74.6-1-211 0.4-283.5 1.4-72.5 4-81.1 8.9-91.2 4.9-10.2 12.1-21.9 21.1-32.7 9.1-10.8 20-20.5 31.3-27.6 11.3-7.1 22.8-11.5 34.8-14.2 12-2.8 24.7-4 94.9-4.5 70.2-0.5 198-0.3 264.3 0.6 66.3 0.9 70.7 2.5 77.6 5 6.9 2.5 16.1 5.9 25.9 12 9.9 6.1 20.4 14.9 29.5 25 9.1 10.2 16.7 21.7 22 33.8 5.4 12.1 8.6 24.6 10.4 37.6 1.8 13 2.2 25.9 3.7 36.8 1.5 10.9 4.1 19.4 8.6 29.5 4.5 10.1 10.9 21.6 19.3 32 8.5 10.4 19 19.5 31 27.3 12 7.8 25.3 14.2 41.6 18 16.3 3.8 35.6 5.1 134.6 5.1 99 0 277.8-1.4 371.1-3.6 93.3-2.2 101-5.3 111.8-10.8 10.8-5.5 24.9-13.3 37.2-23.8 12.3-10.5 23.2-24 30.2-38.2 7-14.2 10.2-28.7 11.6-53.5 1.5-24.7 1.3-59.4-1.1-83-2.4-23.5-7-35.9-13.4-47.9-6.4-12-14.6-23.5-26.1-33.7-11.6-10.2-26.5-18.9-41.1-25.2-14.6-6.3-28.7-10.1-67.8-11.7-39.1-1.6-103.1-1-139.8 2.2-36.7 3.2-46.1 9-57.4 17.1-11.4 8.1-24.7 18.4-35.6 31.5-10.9 13-19.2 28.4-23.8 38.3-4.6 9.9-5.4 14.1-6.3 44.4-0.9 30.3-1.9 86.8-3 118.9-1.1 32.1-2.3 39.9-4 45.1-1.7 5.2-3.9 7.8-5.9 9.9-2 2.1-3.7 3.7-6.7 5.5-3 1.8-7.2 3.8-11.3 5.2-4 1.4-7.8 2.2-14 3.2-6.2 1-14.8 2.2-53.1 2.5-38.3 0.3-106.3-0.3-144.8-2-38.5-1.7-47.5-4.5-58.5-9.7-11-5.2-23.9-12.7-34.6-22-10.8-9.3-19.3-20.2-26-32.9-6.7-12.7-11.5-27-14.2-41.9-2.7-14.9-3.3-30.6-5.6-44.1-2.3-13.5-6.3-24.8-11.5-35.2-5.2-10.4-11.6-19.7-19.9-28.8-8.4-9.1-18.7-17.8-30.7-24.9-12-7.1-25.5-12.5-37.1-16.1-11.6-3.6-21.1-5.4-92.3-6.5-71.2-1.1-204.4-1.6-274.9 0-70.5 1.6-78.4 5.2-87.8 10.2-9.4 5-20.2 11.5-29.7 19-9.5 7.5-17.7 16.1-25 26.1-7.4 10-14 21.3-18.6 33.2-4.7 11.9-7.5 24.2-8.9 34.8-1.4 10.6-1.4 19.3-1.1 88.5 0.3 69.2 0.9 198.8 2.2 266.1 1.3 67.3 3.2 72.2 6.6 81.1 3.4 8.9 8.2 21.7 15.8 33.5 7.5 11.8 17.7 22.6 28 30.8 10.3 8.3 20.6 14.1 31.5 18.7 10.9 4.6 22.2 8 159.5 9.8 137.3 1.8 400.5 2 535.8 1.3 135.2-0.7 142.4-2.3 152.8-6.4 10.5-4.1 23.9-10.6 35.7-18.7 11.8-8 21.9-17.5 30.1-28.2 8.3-10.7 14.8-22.5 20.1-34.3 5.3-11.7 9.4-23.3 10.2-69.3 0.8-46-1.8-124.7-9.8-169.4-8-44.8-20.8-51.7-32.9-56.1-12.2-4.4-23.4-6.1-32.1-6.8-8.7-0.7-14.9-0.4-20.5-0.1-5.5 0.3-10.4 0.7-200.4 0.5-190-0.2-565.2-1.1-940.5-2" />

  <g id="map" x="0" y="0" transform="scale(1) translate(0,0)">
    <image href="https://i.imgur.com/WaWS3m2.png">
    </image>
  </g>  
     
       <rect x="298" y="800" width="71" height="8" fill="gold" /> 
         <rect x="296" y="814" width="75" height="8" fill="#F3F3F3" />  
           <rect x="294" y="827" width="77" height="9" fill="gold" /> 
            <rect x="292" y="840" width="83" height="9.5" fill="#F3F3F3" /> 
           <rect x="290" y="855" width="87" height="11" fill="gold" />              
           <!-- Знак пешеходного перехода -->
       <image href="https://isstatic.askoverflow.dev/1ILIG.jpg" x="260" y="695" width="40px" height="40px" />  
 
  
     <!-- Анимация пешеходов -->
  <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:blue; fill:black;"> 
     <animateMotion id="an1"
       begin="startGreen.begin"
       dur="10s"
       repeatCount="1"  >
          <mpath xlink:href="#child"/>
     </animateMotion>    
   </use>  
     <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:green; fill:black;"> 
       <animateMotion id="an2"
          begin="startGreen.begin+4s"
          dur="10s"
          repeatCount="1"  >
          <mpath xlink:href="#child"/>
       </animateMotion> 
     </use>  
          <use xlink:href="#Man" transform="translate(0,0) scale(1.5)" style="stroke:black; fill:black;"> 
       <animateMotion id="an3"
          begin="startGreen.begin"
          dur="10s"
          repeatCount="1"  >
          <mpath xlink:href="#child2"/>
       </animateMotion> 
     </use>
   <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:red; fill:black;"> 
     <animateMotion id="an4"
           begin="startGreen.begin"
           dur="15s"
           repeatCount="1"  >
              <mpath xlink:href="#home1"/>
     </animateMotion>    
   </use>     
       <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:black; fill:black;"> 
          <animateMotion id="an5"
              begin="startGreen.begin-3s"
              dur="10s"
              repeatCount="1"  >
              <mpath xlink:href="#home2"/>
         </animateMotion>    
      </use>      
        <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:blue; fill:black;"> 
          <animateMotion id="an6"
              begin="startGreen.begin-3s"
              dur="12s"
              repeatCount="1"  >
              <mpath xlink:href="#home2"/>
          </animateMotion>    
       </use>    

           <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:red; fill:black;"> 
          <animateMotion id="an7"
              begin="startGreen.begin-5s"
              dur="14s"
              repeatCount="1"  >
              <mpath xlink:href="#home2"/>
          </animateMotion>    
       </use>      
      
<use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:brown; fill:black;"> 
          <animateMotion id="an8"
              begin="startGreen.begin"
              dur="6s"
              repeatCount="1"  >
              <mpath xlink:href="#back"/>
         </animateMotion>    
</use>      
    <use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:blue; fill:black;"> 
          <animateMotion id="an9"
              begin="startGreen.begin-2s"
              dur="8s"
              repeatCount="1"  >
              <mpath xlink:href="#back"/>
         </animateMotion>    
    </use>      
<use xlink:href="#Man" transform="translate(0,0) scale(2)" style="stroke:brown; fill:black;"> 
          <animateMotion id="an9"
              begin="startGreen.begin-4s"
              dur="8s"
              repeatCount="1"  >
              <mpath xlink:href="#back"/>
         </animateMotion>    
</use>      

  <g transform="translate(312 675) scale(0.3)">
         <!-- верхняя крышка светофора-->
<circle cx="270" cy="55"  r="30" style="fill:grey; " />
            <!-- корпус светофора -->
<rect x="240" y="40" width="60" height="190" style="fill:gray;" />
   
        <!-- секции светофора -->
<g style="fill:none; stroke:black; stroke-width:2px;">
 <rect x="240" y="40" width="60" height="60"  />
 <rect x="240" y="103" width="60" height="60"  />
 <rect x="240" y="166" width="60" height="60"  />
</g> 
    <!-- сигнальные лампочки-->
<circle cx="270" cy="70"  r="20" fill="red" opacity="0.4" >
  <animate id="startRed" attributeName="opacity" begin="0s;smallGreen.end" dur="0.1s" to="1" fill="freeze" /> 
    <animate id="stopRed" attributeName="opacity" begin="startRed.end+5s" dur="0.1s" to="0.4" fill="freeze" /> 
    <animate id="bigRed" attributeName="r" begin="startRed.begin" dur="0.1s" to="28" fill="freeze" /> 
     <animate id="smallRed" attributeName="r" begin="bigRed.end+5s" dur="0.1s" to="20" fill="freeze" />
</circle>

<circle cx="270" cy="133"  r="20" fill="yellow" opacity="0.4" > 
   <animate id="startYellow" attributeName="opacity" begin="smallRed.end" dur="0.1s" to="1" fill="freeze" /> 
     <animate id="stopYellow" attributeName="opacity" begin="smallRed.end+2s" dur="0.1s" to="0.4" fill="freeze" /> 
    
    <animate id="bigYellow" attributeName="r" begin="smallRed.end" dur="0.1s" to="28" fill="freeze" /> 
      <animate id="smallYellow" attributeName="r" begin="smallRed.end +2s" dur="0.1s" to="22" fill="freeze" />
</circle>   
<circle cx="270" cy="196"  r="20" fill="lime" opacity="0.4" >
    <animate id="startGreen" attributeName="opacity" begin="smallYellow.end" dur="0.1s" to="1" fill="freeze" /> 
      <animate id="stopGreen" attributeName="opacity" begin="smallYellow.end+10s" dur="0.1s" to="0.4" fill="freeze" /> 
        <animate id="bigGreen" attributeName="r" begin="smallYellow.end" dur="0.1s" to="28" fill="freeze" /> 
      <animate id="smallGreen" attributeName="r" begin="smallYellow.end +10s" dur="0.1s" to="22" fill="freeze" />
</circle>   
      
          <!-- стойка светофора -->
<rect x="260" y="226" width="20" height="174" style="fill:gray;" /> 
  </g>        
   <!--Автомобиль-->
  <g id="car" >
  <!--Зеркала-->
<path transform="scale(0.1)" 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 transform="scale(0.1)" 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  transform="scale(0.1)" 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 transform="scale(0.1)" 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 transform="scale(0.1)" 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 transform="scale(0.1)" 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 transform="scale(0.1)" d="M91 228l-5-9c31-35 53-76 64-121v132l-41 6c-7 2-14-2-18-8z" fill="lightgray" />
    <!--Фары-->
    <path transform="scale(0.1)" d="M411 72l53 36-10 15-53-36zm43 124l10 15-54 35-10-15z" fill="yellow" />
     </g> 
    <path id="car1" d="M-15,-10 L15,0 L -15,10 z" fill="yellow" stroke="red" stroke-width="7.06"/>
</svg>
</div>

接近斑马区时如何在红灯（行人一侧为绿色）时停止汽车的滚动（移动）？

更新

引用评论：

你完全正确地理解了问题的本质。svg 具有单级动画控制。在开始条件下没有同时触发事件，在开始属性中停止一个动画。无法分配逻辑AND条件，即：

  1. 汽车的位置（在斑马处）
    和
  2. 行人的绿色交通灯。

解决方案需要JS或者canvas。

在此处输入图像描述

javascript
Martin Hope
Alexandr_TT
Asked: 2022-04-02 22:17:12 +0800 CST
  • 4

我的任务是在创建矩形后同时尝试在每个矩形中创建 9 个圆（每个角 4 个，侧面 4 个，中心 1 个）。我的解决方案在矩形外创建了 4 个圆圈，这是不可取的！

在创建矩形的同时，每个矩形应包含 9 个圆（每个角 4 个，侧面 4 个，中间 1 个）。

我使用 snap.svg 库来创建圆形和矩形。

您可以使用以下代码片段：

const svgId = 'campus_map';
const width = document.getElementById(svgId).viewBox.baseVal.width;
const height = document.getElementById(svgId).viewBox.baseVal.height;
let draw = Snap("#tiles");
let c = 0;
let size = Math.round(0.05 * width);
let circleSize = 25;
let circleColor = ["#ff0000", "#000000", "#00ffe1", "#0051ff"];
let svg = document.getElementById(svgId);
for (let i = 0; i <= width; i = i + size) {
    for (let j = 0; j <= height; j = j + size) {
        c += 1;
        let rect = draw.rect(i, j, size, size);
        let circle1 = draw.circle(i, j, circleSize);
        let circle2 = draw.circle(i + (size / 2), j, circleSize);
        let circle3 = draw.circle(i, j + (size / 2), circleSize);
        let circle4 = draw.circle(i + (size / 2), j + (size / 2), circleSize);

        rect.attr({
            fill: "#d00bf3",
            "fill-opacity": 0.2,
            stroke: "#000",
            "stroke-width": "1px",
            id: "rect_" + c,
            name: "rect" + c
        });
        circle1.attr({
            fill: circleColor[0],
            "fill-opacity": 1,
            stroke: "#000",
            "stroke-width": "1px",
            id: "circle1_" + c,
            name: "circle1_" + c
        });
        circle2.attr({
            fill: circleColor[1],
            "fill-opacity": 1,
            stroke: "#000",
            "stroke-width": "1px",
            id: "circle2_" + c,
            name: "circle2_" + c
        });
        circle3.attr({
            fill: circleColor[2],
            "fill-opacity": 1,
            stroke: "#000",
            "stroke-width": "1px",
            id: "circle3_" + c,
            name: "circle3_" + c
        });
        circle4.attr({
            fill: circleColor[3],
            "fill-opacity": 1,
            stroke: "#000",
            "stroke-width": "1px",
            id: "circle4_" + c,
            name: "circle4_" + c
        });
    }
}
<script src="https://unpkg.com/snapsvg@0.5"></script>

<svg viewBox="0 0 8204.08 6413.17" version="1.1" id="campus_map"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

    <g id="tiles"></g>
</svg>

问题的松散翻译在每个矩形中创建 9 个圆圈（每个角 4 个，侧面 4 个，中间 1 个）同时/在由 @Arif Ahmed立即创建一个矩形之后。

javascript