主页 / user-308951

Monkey Mutant's questions

Martin Hope
Monkey Mutant
Asked: 2023-09-29 22:01:30 +0000 UTC
  • 5

我看到一个关于烤面包机的问题，并向答案的作者寻求解释。他抛出了一个 MDN 链接：https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label 当然，我不是 js 大师，我求助于大师，他给了我另一个链接，并说这是 GOTO 的亲戚：https: //habr.com/ru/articles/271131/ 因为我没有'什么都不懂，请用人类语言解释为什么这样设计：

LABEL:
  statenent

不好...我需要理论解释..plz

javascript
Martin Hope
Monkey Mutant
Asked: 2022-07-12 17:44:01 +0000 UTC
  • 9

我想从 gif 重复所有动画

为了做到这一点，我画了这条蛇，甚至把这条蛇弄得歪歪扭扭的，但我不明白需要做什么才能在动画的一开始就没有侧柱，以及如何制作类似的光晕

在此处输入图像描述

这是我的尝试

<svg width="400" viewBox="0 0 609.38 279.68" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(198.07 -4.5882)">
  <path d="m-70.02 279.95c-29.907-1.6357-56.417-11.813-78.052-29.964-6.0632-5.0869-13.525-13.006-18.604-19.744-15.537-20.613-24.346-44.903-26.818-73.951-0.42004-4.9366-0.41761-18.147 4e-3 -22.754 2.9007-31.687 15.735-59.855 37.48-82.258 23.29-23.995 53.139-38.262 87.048-41.607 4.5623-0.45002 18.788-0.45559 23.548-0.0092 37.496 3.5162 69.373 19.864 109.93 56.378 7.109 6.3997 16.018 14.968 28.148 27.073 10.478 10.456 13.338 13.172 13.87 13.172 0.53239 0 3.5209-2.8317 14.451-13.692 14.073-13.984 18.174-17.925 25.76-24.753 38.255-34.437 72.993-52.945 108.54-57.829 7.1174-0.97794 10.82-1.2078 19.182-1.1908 16.348 0.03321 30.326 2.3376 46.302 7.6335 20.105 6.6647 35.662 16.185 49.347 30.2 14.997 15.358 25.492 34.841 31.98 59.368 7.5177 28.42 6.5109 57.404-2.9061 83.663-8.6577 24.141-24.084 45.291-44.788 61.403-11.428 8.8942-25.715 16.572-39.736 21.355-34.463 11.756-71.614 9.3193-106.08-6.9576-14.867-7.0208-30.596-17.476-47.511-31.581-11.513-9.6-20.607-18.075-38.634-36.001-12.885-12.813-15.351-15.152-15.98-15.152-0.61733 0-1.5987 0.87823-5.7977 5.1886-11.24 11.538-29.556 29.087-39.192 37.551-23.435 20.585-44.235 34.237-65.082 42.716-14.704 5.9806-31.066 9.9048-47.493 11.391-3.2145 0.29075-15.782 0.52676-18.918 0.35525zm15.25-55.132c14.91-0.78415 27.848-4.3352 42.561-11.682 15.648-7.8134 30.032-18.303 49.609-36.178 5.8064-5.3016 31.796-31.355 32.037-32.116 0.14007-0.4413-0.27758-0.98323-2.1736-2.8205-1.2909-1.2508-8.7169-8.4734-16.502-16.05-17.427-16.96-21.976-21.222-29.501-27.639-19.76-16.851-37.606-26.987-55.329-31.426-8.7162-2.1831-14.464-2.8146-23.773-2.6117-10.632 0.23171-18.69 1.8413-28.054 5.6036-23.755 9.544-41.568 30.062-47.896 55.172-2.9576 11.735-3.2389 22.754-0.9017 35.322 2.5757 13.85 7.5166 25.444 15.278 35.851 2.9692 3.9811 9.5786 10.586 13.592 13.583 12.056 9.0014 26.49 14.144 42.02 14.972 2.11 0.11251 3.896 0.2215 3.9688 0.24221 0.0728 0.0207 2.3515-0.0791 5.0639-0.22172zm333.23-0.37342c18.216-2.3838 33.623-9.7698 46.372-22.231 6.7217-6.5698 11.946-13.698 15.886-21.675 7.9596-16.116 10.391-33.23 7.2779-51.235-3.7747-21.833-14.531-39.765-30.789-51.329-8.6978-6.1865-19.627-10.702-30.434-12.574-9.8125-1.7001-21.425-1.5954-31.709 0.28582-25.286 4.6255-49.591 18.828-79.414 46.406-9.8671 9.1243-32.017 31.525-32.017 32.379 0 0.40409 1.2235 1.7441 4.0302 4.414 2.2166 2.1086 9.0925 8.7826 15.28 14.831 17.681 17.285 24.951 23.946 34.533 31.637 17.242 13.841 33.981 22.91 49.742 26.951 5.1841 1.329 8.4804 1.8731 15.875 2.6202 2.1412 0.21635 12.524-0.108 15.367-0.48005z" />
   
  <path d="m81.643 116.42c-11.805-11.887-23.24-24.264-36.286-34.774-13.007-10.479-26.503-20.775-41.577-27.97-15.465-7.382-32.054-13.762-49.137-15.119-18.011-1.431-36.691 1.3912-53.673 7.5595-14.787 5.3711-29.333 13.443-40.065 24.946-12.842 13.764-21.634 31.697-26.458 49.893-4.1997 15.839-4.9784 33.121-1.5119 49.137 3.6236 16.742 11.206 33.393 22.679 46.113 11.753 13.031 27.976 22.352 44.601 27.97 20.856 7.0486 43.992 9.285 65.768 6.0476 21.8-3.241 42.778-12.897 61.232-24.946 19.397-12.665 33.829-31.689 49.893-48.381 11.507-11.957 33.262-37.042 33.262-37.042s34.826-40.602 55.94-56.696c17.226-13.131 36.341-24.346 56.696-31.75 22.897-8.3287 47.721-17.221 71.815-13.607 20.845 3.1267 40.692 14.93 55.94 29.482 10.786 10.294 17.607 24.533 22.679 38.554 5.2987 14.647 7.997 30.543 7.5595 46.113-0.3915 13.934-2.6636 28.443-9.0714 40.821-6.7246 12.991-17.618 23.949-29.482 32.506-15.19 10.955-32.846 20.166-51.405 22.679-23.978 3.2468-49.084-2.2907-71.815-10.583-18.92-6.9022-35.611-19.254-51.405-31.75-12.576-9.95-22.839-22.52-34.018-34.018-17.644-18.148-34.324-37.225-52.161-55.185z" fill="none" stroke="#fff" stroke-width="40" id="line" stroke-dasharray="400 1496">
    <animate attributeName="stroke-dashoffset" 
             dur="3s"
             begin="0s"
             values="-400; -1396"
             repeatCount="indefinite"/>
  </path>
 </g>
</svg>

css
Martin Hope
Monkey Mutant
Asked: 2022-06-06 18:04:44 +0000 UTC
  • 1

我想让任意长度的字符串中的最后三个字母从 1 到 0 透明

为了实现这一点，我尝试使用insertAdjacentHTM方法在行尾嵌入 svg > text并没有造成任何困难，但是在行尾获得三个字符并没有完全正确..

这是我的尝试：

let str = document.querySelector(".fade").innerHTML;
let txt = document.querySelector(".fade");

let spl = str.toLowerCase().split("");

console.log(spl)

let svg = `<svg width="100" height="20">
<defs>
 <linearGradient id="lg">
  <stop stop-color="green" offset="0"/>
  <stop stop-color="red" offset="1"/>
 </linearGradient>
</defs>
<text y="15" fill="url(#lg)"> ${spl}</text>
</svg>`;


txt.insertAdjacentHTML("beforeend", svg);
svg {
  display: inline-block;
  vertical-align: middle;
}

svg text {
  font-size: 15px;
  letter-spacing: 0.3px;
}
<div class="fade">
  Текст, последние 3 символа которого уходят в прозрачность
</div>

我怎样才能达到预期的效果？join 方法不是故意添加的...

javascript
Martin Hope
Monkey Mutant
Asked: 2022-05-30 19:50:13 +0000 UTC
  • 0

如何显示隐藏的文字？

我裁剪了文本并在末尾添加了三个点，之后我插入了一个带文本的跨度，Показать весь当您单击该跨度时，应该会出现整个文本

但我得到了一些废话......

document.querySelectorAll(".item p").forEach(function(el) {
  el.innerHTML = el.innerHTML
    .split("", 240)
    .join("")
    .toLowerCase()
    .padEnd(243, ".");
  el.insertAdjacentHTML("beforeend", "<span>Показать весь</span>");
});

document.querySelector(".item p span").addEventListener("click", function() {
  let txt = this.closest(".description").innerHTML;
  let par = this.closest(".description");


})
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item {
  width: 380px;
}

p span {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

p span:hover {
  color: darkblue;
}
<div class="item">
  <p class="description">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus molestias harum repellat ea dolorum repudiandae iste dolor quam hic voluptate modi saepe perferendis iusto adipisci nisi earum excepturi quasi ullam odit ad, ipsam dolore eius molestiae
    est. Optio, ipsa porro. Cupiditate possimus saepe, explicabo veniam unde neque eos molestiae iusto sit hic amet distinctio ducimus quod, non quae assumenda dolorem officia. Error facere ipsum nemo voluptatem? Tempore distinctio excepturi eum, itaque
    sunt labore. Assumenda repellendus, iste magni saepe rem ea in perspiciatis expedita, necessitatibus commodi tenetur odio maxime. Temporibus earum, quaerat rerum qui corporis quo officiis quidem ratione et velit? Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Dicta, quae molestiae. Iste minus veritatis earum omnis nam! Est asperiores distinctio dolore sint maxime ducimus rerum porro placeat ea, atque cum officiis alias architecto enim quas consequuntur non ut recusandae cupiditate. Numquam
    esse fugit illum eveniet ab deleniti iusto debitis eligendi alias quia a, necessitatibus itaque fugiat sunt eum. Corrupti eveniet ducimus voluptates tempora rerum ratione aliquid unde blanditiis distinctio cum ipsum recusandae placeat aut, consectetur
    temporibus modi exercitationem vero, repellendus perspiciatis adipisci reprehenderit officiis cupiditate explicabo. Saepe, et omnis obcaecati labore laboriosam voluptatem rerum cum eveniet iusto accusantium laborum facere?
  </p>
</div>

javascript
Martin Hope
Monkey Mutant
Asked: 2022-05-24 22:55:45 +0000 UTC
  • 1

如何检查只有一个类进入 event.target 并且忽略其他所有内容，即返回 false ？

单击选择项目时，文本被复制到项目中，但是当我写检查时，它停止工作

这是我的尝试

let item = document.querySelector(".item");
let select = document.querySelector(".select");

select.addEventListener("click", function(e) {
  e = event.target;
  if (!e.target.classList.contains == ".select-item") return;
  item.innerHTML = e.innerHTML;
})
.item,
.select-item {
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box;
}

.select {
  margin-top: 50px;
}

.select-item {
  margin-top: 4px;
}
<div class="item">
  Выберите пункт
</div>
<div class="select">
  <div class="select-item">
    Бублик
  </div>
  <div class="select-item">
    Пончик
  </div>
  <div class="select-item">
    Пышка
  </div>
  <div class="select-item">
    Булочка
  </div>
</div>

javascript
Martin Hope
Monkey Mutant
Asked: 2022-05-01 15:06:50 +0000 UTC
  • 7

同名主题不适合，因为它不是一个选项：SVG遮罩的实际应用

我有兴趣将某个掩码应用于常规 html img标签，并且对掩码动画和其他不适用于问题主体的内容不感兴趣

我想将 SVG 蒙版应用于未知数量的图像，但我不明白，图像不可见，我附上代码

img {
  display: block;
  max-width: 100%;
}

.grid {
  width: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  margin: auto;
}

.grid-item img {
  mask: url(#mask);
}
<svg viewBox="0 0 155 219" width="155" height="219" style="display: none;">
  <defs>
    <mask id="mask"  maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect width="100%" height="100%" fill="#000" />
      <circle cx="90" cy="90" r="60" fill="#fff" stroke="red" stroke-width="10"/>
  <circle cx="50" cy="50" r="40" fill="#fff" stroke="red" stroke-width="10"/>
    </mask>
  </defs>
</svg>

<div class="grid">
  <div class="grid-item">
    <img src="https://images.unsplash.com/photo-1619732802548-bfa614fef77b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
  </div>
  <div class="grid-item">
    <img src="https://images.unsplash.com/photo-1619782472846-eba4e6fb2275?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
  </div>
  <div class="grid-item">
    <img src="https://images.unsplash.com/photo-1619641046270-29a0b73d7a9f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
  </div>
  <div class="grid-item">
    <img src="https://images.unsplash.com/photo-1619787942043-99ae128ca5c1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=375&q=80" alt="">
  </div>
  <div class="grid-item">
    <img src="https://images.unsplash.com/photo-1619785938189-264b15dc1694?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
  </div>
</div>

需要做什么才能使 CSS 中的掩码起作用？

这是我想要实现的行为

let svg = document.querySelectorAll(".grid svg");
let svgImage = document.querySelectorAll(".grid svg image");

svg.forEach(function(el) {
  el.setAttribute("viewBox", "0 0 155 219");
  el.setAttribute("xmlns", "http://www.w3.org/2000/svg");
});

svgImage.forEach(function(el) {
  el.setAttribute("x", 0);
  el.setAttribute("y", 0);
  el.setAttribute("width", "100%");
  el.setAttribute("height", "100%");
  el.setAttribute("preserveAspectRatio", "none");
  el.setAttribute("mask", "url(#mask)");
});
.mask {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
}

.grid {
  width: 480px;
  margin: 30px auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
<svg viewBox="0 0 155 219" xmlns="http://www.w3.org/2000/svg" width="155" height="219" class="mask">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="black"></rect>
      <circle cx="80" cy="120" r="60" fill="white" stroke="#c00" stroke-width="10" />
      <circle cx="50" cy="60" r="40" fill="white" stroke="#c00" stroke-width="10" />
    </mask>
  </defs>
</svg>

<div class="grid">

  <div class="grid-item">
    <svg>
      <image href="https://images.unsplash.com/photo-1619783534896-ae45ba5c78d8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
    </svg>
  </div>

  <div class="grid-item">
    <svg>
      <image href="https://images.unsplash.com/photo-1619732514485-2f6896f9e34c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
    </svg>
  </div>

  <div class="grid-item">
    <svg>
      <image href="https://images.unsplash.com/photo-1619732802548-bfa614fef77b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
    </svg>
  </div>

  <div class="grid-item">
    <svg>
      <image href="https://images.unsplash.com/photo-1619782472846-eba4e6fb2275?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" />
    </svg>
  </div>
</div>

javascript
Martin Hope
Monkey Mutant
Asked: 2022-04-20 12:36:04 +0000 UTC
  • 2

有一个特定的组g，在里面我在 javascript 中生成了一堆椭圆，然后在 css 中使用通常沿 Y 轴的偏移量进行动画处理

这不是问题，但有一些条纹

let wrapper = document.querySelector(".wrapper");
let ocum = "";
for (let i = 0; i < 50; i++) {
  ocum += `<ellipse cx="300" cy="0" rx="200" ry="50" />`;
}
wrapper.innerHTML = ocum;
wrapper.querySelectorAll("ellipse").forEach(function(el, i) {
  el.setAttribute("cy", `${i}`);
});
html,
body {
  margin: 0;
  padding: 0;
}

.wrapper {
  transform-origin: 300px 100px;
  transform: rotateX(140deg);
  animation: move 4s linear infinite;
}

@keyframes move {
  0%,
  100% {
    transform: translateY(0) rotateX(140deg);
  }
  50% {
    transform: translateY(-50px) rotateX(140deg);
  }
}

.wrapper ellipse {
  stroke: blue;
  stroke-width: 2;
}

.wrapper ellipse:last-child {
  fill: #1212e3;
}
<svg viewBox="0 0 600 400" id="svg" width="500">
  <g class="wrapper"></g>
</svg>

有没有办法摆脱这些条纹？

svg
Martin Hope
Monkey Mutant
Asked: 2022-04-16 07:37:46 +0000 UTC
  • 0

我在一页上做两个或多个范围滑块，但发生了我不明白的情况！当您更改一个滑块时，它会更改另一个

分配一个id会导致代码增长，但是我希望一个类似的功能也有同样的效果，就是页面上有两个或多个滑块

如何使 2> 范围在页面上工作？

document.querySelectorAll(".custom .range").forEach(function (elem){
  let data = document.querySelectorAll(".custom .view .data");
  data.forEach(function (values){
    elem.addEventListener("input", function (){
      values.innerHTML = this.value + "%"
    })
  })
})
<div class="custom">
  <div class="view"><div class="data">1%</div> </div>
  <input type="range" class="range" min="1" max="100" value="1">
</div>

<div class="custom">
  <div class="view"><div class="data">3%</div></div>
  <input type="range" class="range" min="1" max="100" value="3">
</div>

这个实现在 html + css 中可行吗？

我会很感激一个例子

javascript
Martin Hope
Monkey Mutant
Asked: 2022-03-05 17:41:02 +0000 UTC
  • 2

沿着轮廓有文本，但它在词法上不正确地中断

我画了一个带有两个拱门的圆圈......这是文本的路径

这是一个例子

<svg viewBox="-450 -100 1000 980" xmlns="http://www.w3.org/2000/svg" style="max-width: 200px;">
  <path d="M0,0 
           A 400 400 0 0 0 100 830
           M0,0  
           A 400 400 0 0 1 100 780" fill="none" stroke="red" stroke-width="0" id="path" />

  <text text-anchor="middle" font-family="sans-serif">
    <textPath href="#path" font-size="105px" letter-spacing="5" startOffset="50%" rotate="auto">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

如您所见，单词的顺序被破坏了

并且预计单词将按顺序进行

startOffset 和 text-anchor 等命令无法提供所需的外观

应该怎么做才能纠正这种情况？

svg
Martin Hope
Monkey Mutant
Asked: 2022-02-19 06:57:23 +0000 UTC
  • 2

我按要求绘制了一个 svg，内联如何运作良好，但如果将其作为背景包含在 css 中，则不会显示...。

改了很多次。。

<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="#000" />
      <path d="M0,0 300,0  C300,0 600,300 900,0 L1200,0 1200,600 C1200,600 600,500 0,600z" fill="#fff" />
    </mask>
  </defs>
  <image xlink:href="https://i.ytimg.com/vi/vqvUC-1pNvo/maxresdefault.jpg" width="1200px" height="600px" x="0" y="0" preserveAspectRatio="none" mask="url(#mask)" />
</svg>

为什么文档不能在 css 中作为背景工作？需要做什么才能使其发挥作用？

css
Martin Hope
Monkey Mutant
Asked: 2022-02-11 21:40:05 +0000 UTC
  • 1

有一个 SVG 地图，悬停时会出现一个 div 块，其中包含有关 mousemove 事件的信息

但是根据风水不可能居中..有一些我不知道如何摆脱的静态单位

我的尝试

片段的长度不允许，因此我插入链接：https ://codepen.io/topicstarter/pen/PobbbZN

const svg = document.getElementById("svg-map");
const info = document.querySelector(".info");
const child = svg.querySelectorAll("path");

svg.onmousemove = function(e) {
  e = window.event;

  child.forEach(function(el) {
    info.style.opacity = 1;
    info.innerHTML = e.target.getAttribute("title");
  });

  info.style.left = e.clientX - 200 + "px";
  info.style.top = e.clientY + 20 + "px";
};

svg.onmouseout = function() {
  info.style.opacity = "0";
};

无法得到这个结果

在此处输入图像描述

javascript
Martin Hope
Monkey Mutant
Asked: 2022-01-02 23:25:24 +0000 UTC
  • 6

有一个离题的 SVG 问题 =>如何按顺序对 UIBezier 线进行动画处理

当然这个可以在smil上实现

这就是我所做的

<svg viewBox="0 0 500 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="#fff" stroke="red" stroke-width="1" />
    </marker>
  </defs>
  <path d="" fill="none" stroke="#000" stroke-width="1.2" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)">
    <animate attributeName="d" begin="0s" dur="4s" attributeType="XML" values="
    M20,120 50,130 120,120 180,100 220,130 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,120 180,100 220,130 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,120 180,20 220,130 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,130 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,50 300,120 340,125 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,125 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,55 410,90 490,140;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,55 410,90 490,30;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,55 410,40 490,30;
    M20,120 50,50 120,40 180,20 220,50 300,70 340,85 410,40 490,30;
    M20,120 50,130 120,120 180,100 220,130 300,120 340,125 410,90 490,140;" repeatCount="indefinite" keyTimes="0; 0.1; 0.15; 0.27; 0.30; 0.40; 0.45; 0.80; 0.90; 0.97; 1"/>
  </path>
</svg>

但正如你从他们的动画图片中看到的那样，存在某种抖动

在此处输入图像描述

是否可以使用 SVG 动画 - smil 来实现这种行为？

javascript
Martin Hope
Monkey Mutant
Asked: 2022-01-02 10:25:14 +0000 UTC
  • 1

有一些 SVG，当这个 SVG 位于屏幕中央时，沿 Y 轴的滚动条应该会消失一段时间......

我试图通过条件来计算 - 减去屏幕高度的一半和块高度的一半，但它不起作用......

我哪里做错了？

我的尝试

let doc = document.querySelector("html,body");

document.querySelector("#scroll").addEventListener("wheel", function(e) {
  let coord = e.deltaY + "deg";
  crs.style.transform = `rotate(${coord})`;

})

document.querySelector("#scroll").addEventListener("mousemove", function(e) {
  if (doc.clientHeight == doc.clientHeight / 2 && scroll.clientHeight == scroll.clientHeight / 2) {
    doc.style.overflow = "hidden"
  }
})
html,
body,
#scroll,
section {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#scroll {
  display: flex;
  align-items: center;
  justify-content: center;
}

#circle {
  stroke: #000;
  stroke-width: 2;
  fill: none;
}

#res {
  position: fixed;
  top: 20px;
  right: 20px;
}

#crs {
  transition: 1s linear;
}
<section></section>
<div id="scroll">
  <svg id="svg" viewBox="-250 -250 500 500" xmlns="http://www.w3.org/2000/svg" width="400">
  <circle r="200" id="circle" />
  <g id="crs">
    <circle r="50" cx="-200" fill="red" />
    <circle r="50" cx="200" fill="green" />
    <circle r="50" cy="-200" fill="blue" />
    <circle r="50" cy="200" fill="yellow" />
  </g>
</svg>
</div>
<section></section>

javascript
Martin Hope
Monkey Mutant
Asked: 2021-10-21 19:30:11 +0000 UTC
  • 4

悬停时SVG内部有一个图层，上面会出现带有图案的变形路径。如此设想，只有当悬停在 g.path 上时，悬停才会起作用，也就是说，当悬停在右侧的另一个图像上时，没有悬停！

如何绕过或纠正一种情况？

代码示例：

<svg viewBox="0 0 900 300">
  <defs>
    <style>
      .m {
        cursor: pointer;
        transform: translate(-200px, 0);
        opacity: 0;
        transition: 0.34s cubic-bezier(0, 0.96, 0.99, -0.19);
      }

      .path:hover .m {
        transform: translate(0, 0);
        opacity: 1;
      }

      text {
        font-family: sans-serif;
        font-size: 16px;
        fill: #fff;
      }

      line,
      circle {
        stroke: #fff;
        stroke-width: 2;
        fill: none;
      }

      .unit {
        font-size: 33px;
      }
    </style>
    <pattern id="ptn" viewBox="" width="100%" height="100%">
      <image href="https://expertology.ru/upload/medialibrary/7ad/1.png" x="-250" y="0" width="100%" height="100%" />
    </pattern>
  </defs>
  <defs>
    <mask id="a">
      <rect width="100%" height="100%" fill="#fff" />
      <path d="M0,0 550,0 400,300 0,300z" />
    </mask>

    <mask id="b">
      <rect width="100%" height="100%" fill="#fff" />
      <path d="M570,0 900,0 900,300 420,300z" />
    </mask>
  </defs>

    <image href="https://ada-remont.ru/%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B8/%D0%9E%D0%B1%D0%BB%D0%B8%D1%86%D0%BE%D0%B2%D0%BA%D0%B0%20%D0%B4%D0%BE%D0%BC%D0%BE%D0%B2/obl2.jpg" x="" y="" x="0" y="0" width="900" height="300" mask="url(#a)" />

  <g class="path">

    
<image href="https://www.vipklinker.com.ua/sites/default/files/images/sbr003.jpg" x="0" y="0" width="900" height="300" mask="url(#b)" />

    <g class="m">
      <path d="M350,0 550,0 400,300 200,300z" fill="url(#ptn)" stroke="#fff" stroke-width="6" />

      <text x="270" y="260"> Монтаж</text>
      <text x="365" y="264" class="unit"> &rsaquo; </text>
      <line x1="265" x2="340" y1="270" y2="270" />
      <circle cx="370" cy="255" r="14" />
    </g>
  </g>
  

</svg>

html
Martin Hope
Monkey Mutant
Asked: 2020-05-25 09:04:31 +0000 UTC
  • 4

这对我来说变得很有趣 - 如何从用户代理中仅获取我从中接收信息的浏览器？

写作 ：let ua = window.navigator.userAgent;

检查：console.log(ua)

我得到一个清单："Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

但我只需要我的浏览器，而不是所有存在的。
如何只获得我所在的那个？

javascript
Martin Hope
Monkey Mutant
Asked: 2020-05-12 09:56:24 +0000 UTC
  • 1

我想从https://www.peststopboys.co.uk/复制效果

背景中的人物本身并不有趣。

我对光标的效果很感兴趣......很明显有一个带有动画的形状，但是在这个形状的中心有一个点，当你移动鼠标时，这个点像蠕虫一样伸展......一个非常有趣的效果，但我不能重复它......

问题本身就从这里诞生了：如何通过改变里面的文字颜色，在文字上做出漂亮的悬停效果？

后来我把答案比答案改了一点，得到了一定的结果，但是这个小细节困扰着——

这样的虫子是怎么做出来的？

我使用动画光标的实现，除了蠕虫

let item = document.querySelector(".animate-element");
let body = document.querySelector("body");

let x = body.getBoundingClientRect().x;
let y = body.getBoundingClientRect().y;



body.onmousemove = function(e) {

  item.style.position = "fixed"
  item.style.left = e.x - 150 + "px";
  item.style.top = e.y - 150 + "px";
}
body {
  position: relative;
  cursor: none;
  filter: url(#goo);
  -webkit-filter: url(#goo);
}

.animate-element {
  width: 300px;
  transition: 0.14s linear;
}

.goo {
  position: fixed;
  top: 50%;
  left: 50%;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="10" class="goo">
			  <defs>
			    <filter id="goo">
			      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
			      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -15" result="goo"></feColorMatrix>
			      <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
			    </filter>
			  </defs>
			</svg>

<svg viewBox="0 0 300 300" width="500" height="400" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(0,3)">
  <g stroke-width=".26458">
   <path d="m24.19 19.565h70.304v152.7h-70.304z" fill="#ff2a2a"/>
   <path d="m171.6 166.98-30.187-141.32 137.48 44.518z" fill="#0ff"/>
   <path d="m123.22 166.98h3.7821c24.708 0 44.6 19.892 44.6 44.6v34.02c0 24.708-19.892 44.6-44.6 44.6h-3.7821c-24.708 0-44.6-19.892-44.6-44.6v-34.02c0-24.708 19.892-44.6 44.6-44.6z" fill="#ff0"/>
  </g>
 </g>
</svg>

<div class="animate-element">
  <svg viewBox="0 0 300 300">
  <path d="M 253.24403,163.95239 A 114.90475,106.58929 0 0 1 138.33928,270.54168 114.90475,106.58929 0 0 1 23.434532,163.95239 114.90475,106.58929 0 0 1 138.33928,57.363106 114.90475,106.58929 0 0 1 253.24403,163.95239 " fill="rgba(0,255,0,0.6)" class="anim">
    <animate attributeName="d"
             dur="3s"
             begin="0s"
             values="m 253.24403,163.95239 c 0,58.86764 -51.44461,106.58929 -114.90475,106.58929 -63.46014,0 -113.098711,-47.74936 -114.904748,-106.58929 -1.854318,-60.4129 42.237174,-114.262147 114.904748,-106.589284 63.10931,6.66362 114.90475,47.721644 114.90475,106.589284 z;M 253.24403,163.95239 C 248.34588,222.6159 201.79942,270.54168 138.33928,270.54168 74.87914,270.54168 25.240569,222.79232 23.434532,163.95239 21.580214,103.53949 65.608616,64.412909 138.33928,57.363106 229.31627,48.544682 258.39831,102.22126 253.24403,163.95239 Z;M 253.24403,163.95239 C 263.32846,226.55868 223.5326,264.18332 138.33928,270.54168 55.700924,276.70935 23.289514,224.566 23.434532,163.95239 23.579137,103.51121 65.608616,64.412909 138.33928,57.363106 229.31627,48.544682 243.39295,102.79476 253.24403,163.95239 Z;M 253.24403,163.95239 C 248.34588,222.6159 200.57626,258.14218 138.33928,270.54168 57.068323,286.73333 23.289514,224.566 23.434532,163.95239 23.579137,103.51121 65.608616,64.412909 138.33928,57.363106 229.31627,48.544682 258.39831,102.22126 253.24403,163.95239 Z;M 253.24403,163.95239 A 114.90475,106.58929 0 0 1 138.33928,270.54168 114.90475,106.58929 0 0 1 23.434532,163.95239 114.90475,106.58929 0 0 1 138.33928,57.363106 114.90475,106.58929 0 0 1 253.24403,163.95239 "
             repeatCount="indefinite" />
  </path>
  <path fill="red" d="M 92.22618,159.41668 A 15.497022,13.607142 0 0 1 76.729158,173.02382 15.497022,13.607142 0 0 1 61.232136,159.41668 15.497022,13.607142 0 0 1 76.729158,145.80953 15.497022,13.607142 0 0 1 92.22618,159.41668 Z">
       <animate attributeName="d"
             dur="3s"
             begin="0s"
             values="m 92.22618,159.41668 c -7.015842,2.69322 -6.938254,13.60714 -15.497022,13.60714 -8.558768,0 -15.497021,-6.09212 -15.497022,-13.60714 -5e-6,-7.51502 7.003489,-12.5524 15.497022,-13.60715 37.200652,-4.61966 49.259242,0.64661 15.497022,13.60715 z;m 92.22618,159.41668 c 8.30303,8.62209 13.81279,16.37395 -15.497022,13.60714 -8.520887,-0.80436 -15.497021,-6.09212 -15.497022,-13.60714 -5e-6,-7.51502 6.93825,-13.60715 15.497022,-13.60715 8.558772,0 10.284199,8.19402 15.497022,13.60715 z;m 92.22618,159.41668 c -10e-7,7.51502 -7.557009,10.41203 -15.497022,13.60714 -21.591714,8.68863 -19.572869,-3.37489 -15.497022,-13.60714 2.780975,-6.98153 6.93825,-13.60715 15.497022,-13.60715 8.558772,0 15.497027,6.09213 15.497022,13.60715 z;M 92.22618,159.41668 A 15.497022,13.607142 0 0 1 76.729158,173.02382 15.497022,13.607142 0 0 1 61.232136,159.41668 15.497022,13.607142 0 0 1 76.729158,145.80953 15.497022,13.607142 0 0 1 92.22618,159.41668 Z "
             repeatCount="indefinite"
                class="goo2"/> 
  </path>
</svg>
</div>

javascript
Martin Hope
Monkey Mutant
Asked: 2020-04-20 18:03:55 +0000 UTC
  • 3

有一个常circle

并且还希望看到更改的平滑度，这是在使用时fill通过类型变量分配的var(--color)use

我知道shadow dom这件事，不需要解释，但我想看到一种顺利改变的方法fill

在 Firefox 中运行良好，在其他任何地方都没有......

示例问题本身：

svg {
  --color: red;
}

circle {
  transition: 0.34s linear;
}

svg:hover {
  --color: blue;
}
<svg width="0" height="0">
  <symbol viewBox="0 0 20 20" id="c">
    <circle cx="10" cy="10" r="10" fill="var(--color)">
  </symbol>
</svg>

<svg width="50px"><use xlink:href="#c" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#icon" x="0" y="0" class="icon"/>
</svg>

svg
Martin Hope
Monkey Mutant
Asked: 2020-04-06 03:52:25 +0000 UTC
  • 11

看到一个网站，效果很有意思：https ://travelshift.com/

在右上角有一个带箭头的圆形按钮，如果你点击它，想要的效果开始了，我所有的尝试都失败了，没有代码。

也许有人不会看到它，这个皮肤链接到 Dropbox 中的视频：视频

单击鼠标按钮后效果本身开始..

是否有可能在 css 上至少获得部分副本？

不需要 javascript 着色器答案

css3
Martin Hope
Monkey Mutant
Asked: 2020-03-17 16:43:17 +0000 UTC
  • 1

问题在标题中-我无法弄清楚为什么会这样...

let parent = document.querySelector(".items");

let units = [{
  "image": "https://im0-tub-kz.yandex.net/i?id=d8f146ffd72ad3ad74aa0a7d30a79e82&n=13&exp=1",
  "name": "iphone 6",
  "price": "$200",
}, {
  "image": "https://www.hardwareluxx.ru/images/cdn01/E39DA3FE88B24CC9AA35003A8035E70B/img/DD33455A05B9440C8C7199EF6EF82995/apple_iphone8_product_red_00002_DD33455A05B9440C8C7199EF6EF82995.jpg",
  "name": "iphone7",
  "price": "$400",
}, {
  "image": "https://apollo-frankfurt.akamaized.net/v1/files/uhjqavbjoxm21-KZ/image;s=644x461",
  "name": "iphone 8",
  "price": "$500",
}, {
  "image": "https://stot64.ru/wp-content/uploads/2019/12/f19bdb6d96b4cbedfbb0018ec0a3a97a.jpg",
  "name": "iphone XS",
  "price": "$2000",
}];

let goo = "";

for (item in units) {
  let block = document.createElement("div");
  goo += `<img src="${units[item].image}" alt="${units[item].name}">`;
  goo += `<h3>${units[item].name}</h3>`;
  goo += `<p>${units[item].price}</p>`;
  block.innerHTML = goo;
  parent.append(block);
}
.items {
  display: flex;
}

img {
  display: block;
  max-width: 100%;
}
<div class="items"></div>

javascript
Martin Hope
Monkey Mutant
Asked: 2020-03-15 22:22:21 +0000 UTC
  • 1

我正在尝试使 svg 宽度取决于父母的宽度

为此，我启动了两个变量...并使用它们

100px显示在 console.log 中，这是正确的，应该是这样，但是svg应该是100px * 2，但是出现了NaN我也明白这不是错误，但也不是数字..

如何纠正这种情况？

let item   =  document.querySelector(".item-svg"),
    x            =  10,
    n            =  0,
    c            =  x*2,
    vh           =  x*6,
    start        =  `m ${n} ${n} h${x} v${x}`,
    c1           =  `c ${n} ${x} ${x} ${x} ${x} ${c}`,
    c2           =  `c ${n} ${x} ${-x} ${x} ${-x} ${c}`,
    finish       =  `v ${x} h ${-x}`,
    con          =  `${start} ${c1} ${c2} ${finish}`,
    svg          =   document.createElementNS('http://www.w3.org/2000/svg', "svg"),
    path         =   document.createElementNS('http://www.w3.org/2000/svg', "path"),
    color        =   getComputedStyle(item).backgroundColor,
    parentWidth  =   getComputedStyle(item).width;

   console.log(parentWidth);

    svg.setAttribute("viewBox", `0 0 ${c} ${vh}`);
    svg.setAttribute("width", parentWidth*2);

    console.log(svg.getAttribute("width"));

    path.setAttribute("d", con);
    path.setAttribute("fill", color);
    svg.append(path);
    item.append(svg);
html,body{
  margin: 0;
}

.item-svg{
  position: relative;
  width: 100px;
  height: 100vh;
  background-color: pink;
}

.item-svg svg{
  position: absolute;
  left: 0;
}
<div class="item-svg"></div>

关于这个变量： parentWidth = getComputedStyle(item).width;

javascript