SVG 多边形可以在桌面上工作，但不能在移动设备上工作

问题描述 投票：0回答：1

我正在叠加两个多边形并使用过滤器进行扭曲，连接到“生成”按钮。在桌面上运行良好。移动设备（Chrome 和 Safari）上不显示 SVG。不确定是什么问题。这是我很长时间以来第一次使用 SVG。我不知道是否是滤镜导致看不清，但我尝试更改为明亮的颜色，但仍然没有任何效果。不知道该怎么办。

function generateA() {
  function random(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive
  }

  let x1 = random(0, 830);
  let y1 = random(0, 1080);
  let x2 = random(0, 830);
  let y2 = random(0, 1080);
  let x3 = random(0, 830);
  let y3 = random(0, 1080);
  let x4 = random(0, 830);
  let y4 = random(0, 1080);
  let x5 = random(0, 830);
  let y5 = random(0, 1080);
  let x6 = random(0, 830);
  let y6 = random(0, 1080);
  let x7 = random(0, 830);
  let y7 = random(0, 1080);
  let x8 = random(0, 830);
  let y8 = random(0, 1080);

  let svg = document.getElementById("svg");
  let shape = document.getElementById("polygonA");
  shape.setAttribute("points", `${x1} ${y1}, ${x2} ${y2}, ${x3} ${y3}, ${x4} ${y4}, ${x5} ${y5}, ${x6} ${y6}, ${x7} ${y7}, ${x8} ${y8}`);
  svg.appendChild(shape);
}

function generateB() {
  function random(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive
  }

  let x1 = random(0, 830);
  let y1 = random(0, 1080);
  let x2 = random(0, 800);
  let y2 = random(0, 200);
  let x3 = random(0, 830);
  let y3 = random(0, 1080);
  let x4 = random(0, 830);
  let y4 = random(0, 1080);
  let x5 = random(0, 830);
  let y5 = random(0, 1080);
  let x6 = random(0, 830);
  let y6 = random(0, 1080);
  let x7 = random(0, 830);
  let y7 = random(0, 1080);
  let x8 = random(0, 830);
  let y8 = random(0, 1080);

  let svg = document.getElementById("svg");
  let shape = document.getElementById("polygonB");
  shape.setAttribute("points", `${x1} ${y1}, ${x2} ${y2}, ${x3} ${y3}, ${x4} ${y4}, ${x5} ${y5}, ${x6} ${y6}, ${x7} ${y7}, ${x8} ${y8}`);
  svg.appendChild(shape);
}

generateA();
generateB();

let btn1 = document.getElementById("btn1");
btn1.addEventListener("click", function(e) {
  generateA();
});
let btn2 =
  document.getElementById("btn2");
btn2.addEventListener("click", function(e) {
  generateB();
});
* {
  background-color: burlywood;
}

button {
  display: inline;
  position: static;
  bottom: 1rem;
  right: 1rem;
  background: #111;
  color: #fff;
  padding: 0.5rem 1.75rem;
  border: none;
  cursor: pointer;
}
<svg id="svg" version="2" width="830" height="1080" xmlns="https://www.w3.org/2000/svg">
     <filter id="round">
     <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
     <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
       <feTurbulence
      type="turbulence"
      baseFrequency="0.01"
      numOctaves="1"
      result="turbulence" />
    <feDisplacementMap
      in2="turbulence"
      in="SourceGraphic"
      scale="300"
      xChannelSelector="R"
      yChannelSelector="G" />
     </filter>
   
    <polygon id="polygonA" stroke="crimson" stroke-width="7" fill="none" filter="url(#round)"/>
    <polygon id="polygonB" stroke="darkolivegreen" stroke-width="7" fill="none" filter="url(#round)"/>    
  </svg>

<button id="btn1">GenerateA</button>
<button id="btn2">GenerateB</button>

html svg mobile polygon
1个回答
0
投票

我认为这是您的 

<feComposite>
定义中的错误。

您指的是之前的过滤结果——“goo”——它不存在。

这对我在 iOS safari 上有用

function generateA() {
  function random(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive
  }

  let x1 = random(0, 830);
  let y1 = random(0, 1080);
  let x2 = random(0, 830);
  let y2 = random(0, 1080);
  let x3 = random(0, 830);
  let y3 = random(0, 1080);
  let x4 = random(0, 830);
  let y4 = random(0, 1080);
  let x5 = random(0, 830);
  let y5 = random(0, 1080);
  let x6 = random(0, 830);
  let y6 = random(0, 1080);
  let x7 = random(0, 830);
  let y7 = random(0, 1080);
  let x8 = random(0, 830);
  let y8 = random(0, 1080);

  let svg = document.getElementById("svg");
  let shape = document.getElementById("polygonA");
  shape.setAttribute("points", `${x1} ${y1}, ${x2} ${y2}, ${x3} ${y3}, ${x4} ${y4}, ${x5} ${y5}, ${x6} ${y6}, ${x7} ${y7}, ${x8} ${y8}`);
  svg.appendChild(shape);
}

function generateB() {
  function random(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive
  }

  let x1 = random(0, 830);
  let y1 = random(0, 1080);
  let x2 = random(0, 800);
  let y2 = random(0, 200);
  let x3 = random(0, 830);
  let y3 = random(0, 1080);
  let x4 = random(0, 830);
  let y4 = random(0, 1080);
  let x5 = random(0, 830);
  let y5 = random(0, 1080);
  let x6 = random(0, 830);
  let y6 = random(0, 1080);
  let x7 = random(0, 830);
  let y7 = random(0, 1080);
  let x8 = random(0, 830);
  let y8 = random(0, 1080);

  let svg = document.getElementById("svg");
  let shape = document.getElementById("polygonB");
  shape.setAttribute("points", `${x1} ${y1}, ${x2} ${y2}, ${x3} ${y3}, ${x4} ${y4}, ${x5} ${y5}, ${x6} ${y6}, ${x7} ${y7}, ${x8} ${y8}`);
  svg.appendChild(shape);
}

generateA();
generateB();

let btn1 = document.getElementById("btn1");
btn1.addEventListener("click", function(e) {
  generateA();
});
let btn2 =
  document.getElementById("btn2");
btn2.addEventListener("click", function(e) {
  generateB();
});
* {
  background-color: burlywood;
}

button {
  display: inline;
  position: static;
  bottom: 1rem;
  right: 1rem;
  background: #111;
  color: #fff;
  padding: 0.5rem 1.75rem;
  border: none;
  cursor: pointer;
}
<svg id="svg" viewBox="0 0 830 1080" xmlns="https://www.w3.org/2000/svg">
  <filter id="round">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
    <feComposite in="SourceGraphic" in2="blur" operator="atop" />
    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1" result="turbulence" />
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="300" xChannelSelector="R" yChannelSelector="G" />
  </filter>

  <polygon id="polygonA" stroke="crimson" stroke-width="7" fill="none" filter="url(#round)" />
  <polygon id="polygonB" stroke="darkolivegreen" stroke-width="7" fill="none" filter="url(#round)" />
</svg>

<button id="btn1">GenerateA</button>
<button id="btn2">GenerateB</button>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.