解决svg中使用渐变色和阴影导致路径不显示的问题_svg path 渐变色

相关文章推荐

个性的小蝌蚪 · <svg></svg> 如何保存为一个 ...· 2 周前 ·

不爱学习的花生 · 中华好儿女吴焜与杨瑞年 _光明网· 2 月前 ·

强健的土豆 · 金华开发区“四重点”加强危化领域安全监管· 3 月前 ·

没有腹肌的碗 · 魔猿和黑犬漫画结局 - 抖音· 1 年前 ·

奋斗的机器人 · 周烁方：《大鱼•海棠》心理影评——成人不易_ ...· 1 年前 ·

腼腆的椅子 · 广汽埃安AION Y Plus上市 ...· 1 年前 ·

使用场景如下：

.firstPath {
    cursor: pointer;
    fill:none;
    stroke-width:4;
    stroke-dasharray: 60 60;
    stroke-dashoffset: 0;
    // stroke:#00cc66;
// 引用线性渐变和阴影效果
    stroke:url(#gradient2);
    filter:url(#shadow2);
    animation: dash 3s linear infinite;
2.解决办法 
（1）关键字objectBoundingBox这玩意儿，在元素没有宽度或者高度的时候，会失去作用，linearGradient渐变又依赖这个属性，所以失效了。解决方案很简单，为linearGradient加上属性gradientUnits="userSpaceOnUse"。gradientUnits是用于规定元素的坐标系统的，有两个属性userSpaceOnUse和objectBoundingBox，后者是默认的。 
阴影效果应该是同样的原因： 
加上属性：filterUnits="userSpaceOnUse" 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg" id="svg" ref="svg" :style="svgBgstyle">
<!-- 线性渐变色，必须要加gradientUnits，否则有的路径不显示 -->
                <linearGradient id="gradient2" gradientUnits="userSpaceOnUse">
                    <stop offset="0%" stop-color="#10a5ff" />
                    <stop offset="50%" stop-color="#03c6fd" />
                    <stop offset="95%" stop-color="#11ffe4" />
                </linearGradient>
                <!-- 高斯模糊阴影，必须加filterUnits：否则有的路径不显示-->
                <filter id="shadow2" filterUnits="userSpaceOnUse">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="6"/>
                    <feBlend in="SourceGraphic"  mode="normal" />
                </filter>
            </defs>
            <!-- 最优疏散路径 -->
            <path v-for="(item, index) in pathList" class="firstPath" stroke-linecap="round" :key="'path' + index" :id="'path'+index" :d="item.path"></path>
  我们选择删除D3上的缺陷，并进一步泛化代码，以使其他人可以更轻松地在他们的项目中使用它。
安装说明取决于您是否在项目中使用D3.js。 如果您打算在gradient-path旁边使用D3，则不需要安装tinygradient 。 如果要在Javascript项目中独立使用渐变路径，则还必须安装这些依赖项（但请放心，将两个压缩包压缩在一起的大小大约为8kb，因此可以忽略不计）。
 使用任何Javascript项目进行安装：
 NPM： npm install --save gradient-path tinygradient 纱线： yarn add gradient-path tinygradient
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
// 1 圆形
    <linearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0%" stop-color="#ff0000" />
      <stop offset="50%" stop-color="#ffff00" />
      <stop offset="100%" stop-color="#00ff00" />
    </linearGradient>
    <mask id="mask">
      <rect x="0" y="0" width="100%" height="100%" fill="white" />
      <circle cx="50" cy="50" r="30" fill="black" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" mask="url(#mask)" />
  <path d="M 0 50 Q 25 10 50 50 Q 75 90 100 50" stroke="#fff" stroke-width="5" fill="none" />
</svg>
这个示例中，我们定义了一个线性渐变 `gradient`，它包含了三个颜色停止点，分别是红色、黄色和绿色。接着，我们定义了一个遮罩 `mask`，它包含了一个矩形和一个圆形，用来遮住渐变。最后，我们使用 `rect` 元素来填充渐变，并使用 `path` 元素来绘制路径。路径的形状是一个三次贝塞尔曲线，它会在渐变的背景下涌动。
你可以将上面的代码复制到 HTML 文件中运行，查看效果。注意，该示例只能在支持 SVG 的浏览器中运行。