主页 / 问题 / 1076758
Accepted
Air
Asked:2020-01-31 22:04:01 +0000 UTC2020-01-31 22:04:01 +0000 UTC

SVG 路径元素看不到水平渐变

  • 772

有这样一个例子，免得解释半天，把最后一个坐标改一下，看看会发生什么。

js，和这个问题无关(смотреть пример 2)，一个改变最后一个坐标的函数path，只是为了方便看问题的人看问题。

至于替换path为rect，它不起作用......这是一个大型综合体的一小部分，您无法替换path为rect。

const input = document.querySelector('input');
document.querySelector('.path').setAttribute('d', 'M5 250 495 ' + input.value);
input.addEventListener('input', function() {
  document.querySelector('.path').setAttribute('d', 'M5 250 495 ' + input.value);
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: #272727;
}

div.wrapper {
  height: 500px;
  background-color: #10e7dd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

input {
  height: 50px;
  width: 100px;
  text-align: center;
  font-size: 25px;
}

svg {
  background-color: grey;
}
<div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
        <defs>
          <linearGradient id="gradient" x1="0%" x2="100%" y1="0%"  y2="0%">
            <stop offset="0%" stop-color="#f00" />
            <stop offset="100%" stop-color="#00f" />
          </linearGradient>
        </defs>
      <path class="path"  stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250.1"/>
      
      </svg>
  <div>
    <input type="number" value="250">
  </div>
</div>

这就是没有 JS 的样子

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: #272727;
}

div.wrapper {
  height: 500px;
  background-color: #10e7dd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

svg {
  background-color: grey;
}
<div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
            <defs>
              <linearGradient id="gradient" x1="0%" x2="100%" y1="0%"  y2="0%">
                <stop offset="0%" stop-color="#f00" />
                <stop offset="100%" stop-color="#00f" />
              </linearGradient>
            </defs>
          <path class="path"  stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250"/>
          
          </svg>
</div>

这是什么，bug？如何解决？

javascript

2 个回答

  1. Best Answer

    假设元素距离水平线的高度为零（笔划不影响元素的大小），默认梯度大小是根据元素的大小计算的（objectBoundingBox）。如果您添加渐变，gradientUnits="userSpaceOnUse"那么它可以工作。
    但是，应该记住，渐变的坐标将相对于整个 SVG 元素的坐标系进行计算。

    const input = document.querySelector('input');
document.querySelector('.path').setAttribute('d', 'M5,250 495,' + input.value);
input.addEventListener('input', function() {
  document.querySelector('.path').setAttribute('d', 'M5,250 495,' + input.value);
});
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  background-color: #272727;
}

div.wrapper {
  height: 500px;
  background-color: #10e7dd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

input {
  height: 50px;
  width: 100px;
  text-align: center;
  font-size: 25px;
}

svg {
  background-color: grey;
}
    <div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
            <defs>
              <linearGradient id="gradient" x1="0%" x2="100%" y1="0%"  y2="0%" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#f00" />
                <stop offset="100%" stop-color="#00f" />
              </linearGradient>
            </defs>
          <path class="path"  stroke-width="100" stroke="url(#gradient)" fill="none" d="M5,250 495,250"/>
          
          </svg>
  <div>
    <input type="number" value="250">
  </div>
</div>

    • 3

  2. 将线更改为矩形。在使用渐变的意义上，对于您的应用程序，也许它会更可靠。

    改变渐变条的大小取决于input 

    var slider = document.getElementById("slider");
var rect = document.getElementById("path");

slider.addEventListener("change", function(evt) {

  var sliderValue = evt.target.value;
   rect.setAttribute("width", sliderValue);
   
});
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 50vw;
  height: 100vh;
  background-color: #272727;
}

div.wrapper {
  height: 500px;
  background-color: #10e7dd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

input {
  height: 50px;
  width: 100px;
  text-align: center;
  font-size: 25px;
}

svg {
  background-color: grey;
}
    <div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
        <defs>
          <linearGradient id="gradient" x1="0%" x2="100%" y1="0%"  y2="0%">
            <stop offset="0%" stop-color="#f00" />
            <stop offset="100%" stop-color="#00f" />
          </linearGradient>
        </defs>
      <!-- <path class="path"  stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250.1"/> -->
      <rect id="path" x="5" y="250" width="10" height="100" fill="url(#gradient)" >
	   
	   </rect>
      </svg>
  <div>
    <input id="slider" type="range" min="10" step="1" max="490"  value="0">
  </div>
</div>

    渐变条纹动画 

    var slider = document.getElementById("slider");
var anim = document.getElementById("anim");

slider.addEventListener("change", function(evt) {

  var sliderValue = evt.target.value;
  var currentTo = anim.getAttribute("to");
  anim.setAttribute("from", 10);
  anim.setAttribute("to", sliderValue);
  anim.beginElement();

});
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 50vw;
  height: 100vh;
  background-color: #272727;
}

div.wrapper {
  height: 500px;
  background-color: #10e7dd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

input {
  height: 50px;
  width: 100px;
  text-align: center;
  font-size: 25px;
}

svg {
  background-color: grey;
}
    <div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
        <defs>
          <linearGradient id="gradient" x1="0%" x2="100%" y1="0%"  y2="0%">
            <stop offset="0%" stop-color="#f00" />
            <stop offset="100%" stop-color="#00f" />
          </linearGradient>
        </defs>
      <!-- <path class="path"  stroke-width="100" stroke="url(#gradient)" fill="none" d="M5 250 495 250.1"/> -->
      <rect class="path" x="5" y="250" width="10" height="100" fill="url(#gradient)" >
	   <animate id="anim"
	     attributeName="width"
		   dur="1s"
       fill="freeze"/>
	   </rect>
      </svg>
  <div>
    <input id="slider" type="range" min="0" step="1" max="490"  value="0">
  </div>
</div>

    • 2

相关问题