Question

我有这个问题只是因为这个相同的线性渐变适用于另一个页面，相同的浏览器（chrome和firefox）。我从一个.jade文件中复制并粘贴了以下代码，该文件适用于不起作用的新文件：

.mycontainer
  svg(xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg")
    defs(id="defs")
      linearGradient(id="grad1" x1="0%" y1="0%" x2="100%" y2="0%")
        stop(offset="0%" id="stop1")
        stop(offset="100%" id="stop2")
    text(fill="url(#grad1)" id="text" x="50%" y="75") THIS TEXT SHOWS UP AS BLACK

实际上，虽然url(#grad1)在一页上工作，但只有url(#defs #grad1)会在此页面上显示任何文字。但仍然不是渐变，只是黑色文字。另外，我尝试将fill="url(#grad1")更改为fill="red"，我可以看到红色文字，所以它看起来是渐变的问题。

我将以下代码从一个.less文件中复制到另一个不起作用的文件中：

.mycontainer {
  font-family: sans-serif;
  font-weight: 200;
  display: block;
  text-align: center;
  #svg {
    width: 100%;
    height: 80px;
    #defs {
      #grad1 {
        #stop1 {
          stop-color:#00ffff;
          stop-opacity:1;
        }
        #stop2 {
          stop-color:#ff7fff;
          stop-opacity:1;
        }
      }
    }
    #text {
      text-anchor: middle;
      font-size:20px;
    }
  }
}

有什么可以解释这个？我知道当某些资源无法加载时，会影响其他东西的负载。文字出现的很奇怪，但它是黑色的，而不是渐变的。请记住，我从其他2个文件中复制并粘贴了这个确切的代码，这些文件转到了这个工作的网页。思考？（如果需要更多代码，请告诉我。）提前致谢！

在我的玉文件中看不到线性渐变svg文本

0 个答案: