向 SVG 元素添加阴影，例如线条

Question

向 SVG 元素添加阴影，例如线条

我对 SVG 还很陌生，但我开始使用图表。该图来自这里。我已经搜索了几个小时，但只找到了问题的一半解决方案。正如您从代码片段中看到的，如果您将鼠标悬停在图表上，它就会“发光”。但我希望当我悬停在圆圈和“关节”上时，只有圆圈和“关节”才会发光。

我尝试过的：

使用常规 CSS 阴影
使用使图形“发光”的代码，但仅在 g 元素上。
创建一个单独的 SVG：a) 在主 SVG 中 b) 分别，并将它们与position: absolute. （此后定位工作很奇怪）

我该怎么做才能让圆圈和关节“发光”？

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

  html, body{
    height: 100%;
    width: 100%;  
  }

  @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
  body {
    font-family: 'Roboto Mono', monospace;
  }

  .graph .labels.x-labels {
    text-anchor: middle;
  }

  .graph .labels.y-labels {
    text-anchor: end;
  }

  .graph {
    height: 500px;
    width: 800px;
  }

  .graph .grid {
    stroke: #ccc;
    stroke-dasharray: 0;
    stroke-width: 3;
  }

  .labels {
    font-size: 17px;
    font-weight: 400;
  }

  .label-title {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    fill: black;
  }

  .data {
    fill: #f86d36;
    stroke-width: 1;
  }

  .graph .dot-joints {
    stroke: #f86d36;
    stroke-dasharray: 0;
    stroke-width: 3;
  }

  svg:hover  {
    -webkit-filter: drop-shadow(0px 0px 4px #f86d36e8);
    filter: drop-shadow(0px 0px 4px #f86d36e8);
  }

Run Code Online (Sandbox Code Playgroud)

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph"
    aria-labelledby="title" role="img">
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="90" y1="5" y2="371"></line>
    </g>
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="705" y1="370" y2="370"></line>
    </g>
    <g class="labels x-labels"><text x="100" y="400">2008</text><text x="246" y="400">2009</text><text x="392"
            y="400">2010</text><text x="538" y="400">2011</text><text x="694" y="400">2012</text><text x="400" y="440"
            class="label-title">Year</text></g>
    <g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
            y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
    <g class="data" data-setname="Our first data set">
        <circle cx="95" cy="192" data-value="7.2" r="5"></circle>
        <circle cx="240" cy="141" data-value="8.1" r="5"></circle>
        <circle cx="388" cy="179" data-value="7.7" r="5"></circle>
        <circle cx="531" cy="200" data-value="6.8" r="5"></circle>
        <circle cx="677" cy="104" data-value="6.7" r="5"></circle>
    </g>
    <g class="dot-joints x-grid">
        <line x1="95" x2="240" y1="192" y2="141"></line>
        <line x1="240" x2="388" y1="141" y2="179"></line>
        <line x1="388" x2="531" y1="179" y2="200"></line>
        <line x1="531" x2="677" y1="200" y2="104"></line>
    </g>
</svg>

Run Code Online (Sandbox Code Playgroud)

Answer 1

enx*_*eta 5

我希望这就是您所需要的：我正在使用 svg 滤镜作为阴影。在您的代码中，我.data circle:hover{filter:url(#f)}为各个圆圈和.dot-joints.x-grid:hover{filter:url(#f)}一组线条添加了：

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

  html, body{
    height: 100%;
    width: 100%;  
  }

  @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
  body {
    font-family: 'Roboto Mono', monospace;
  }

  .graph .labels.x-labels {
    text-anchor: middle;
  }

  .graph .labels.y-labels {
    text-anchor: end;
  }

  .graph {
    height: 500px;
    width: 800px;
  }

  .graph .grid {
    stroke: #ccc;
    stroke-dasharray: 0;
    stroke-width: 3;
  }

  .labels {
    font-size: 17px;
    font-weight: 400;
  }

  .label-title {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    fill: black;
  }

  .data {
    fill: #f86d36;
    stroke-width: 1;
  }
  .data circle:hover{filter:url(#f)}

  .graph .dot-joints {
    stroke: #f86d36;
    stroke-dasharray: 0;
    stroke-width: 3;
  }
  
  .dot-joints.x-grid:hover{filter:url(#f)}

Run Code Online (Sandbox Code Playgroud)

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph"
    aria-labelledby="title" role="img">
    <defs>
    <filter id="f" filterUnits="userSpaceOnUse" id="shadow" x="-10" y="-150" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
      <feOffset in="blur" dx="3" dy="1" result="shadow"></feOffset>
      <feFlood flood-color="rgba(0,0,0,.52)" result="color" />
      <feComposite in ="color" in2="shadow" operator="in" />
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="90" y1="5" y2="371"></line>
    </g>
    <g class="grid x-grid" id="xGrid">
        <line x1="90" x2="705" y1="370" y2="370"></line>
    </g>
    <g class="labels x-labels"><text x="100" y="400">2008</text><text x="246" y="400">2009</text><text x="392"
            y="400">2010</text><text x="538" y="400">2011</text><text x="694" y="400">2012</text><text x="400" y="440"
            class="label-title">Year</text></g>
    <g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
            y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
    <g class="data" data-setname="Our first data set">
        <circle cx="95" cy="192" data-value="7.2" r="5"></circle>
        <circle cx="240" cy="141" data-value="8.1" r="5"></circle>
        <circle cx="388" cy="179" data-value="7.7" r="5"></circle>
        <circle cx="531" cy="200" data-value="6.8" r="5"></circle>
        <circle cx="677" cy="104" data-value="6.7" r="5"></circle>
    </g>
    <g class="dot-joints x-grid" >
        <line x1="95" x2="240" y1="192" y2="141"></line>
        <line x1="240" x2="388" y1="141" y2="179"></line>
        <line x1="388" x2="531" y1="179" y2="200"></line>
        <line x1="531" x2="677" y1="200" y2="104"></line>
    </g>
</svg>

Run Code Online (Sandbox Code Playgroud)

或者你可能想要这个：

svg:hover .data,
svg:hover .dot-joints.x-grid{filter:url(#f)}

Run Code Online (Sandbox Code Playgroud)

当悬停 svg 元素时，将阴影应用于线条和圆形。

svg:hover .data,
svg:hover .dot-joints.x-grid{filter:url(#f)}

Run Code Online (Sandbox Code Playgroud)

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

  html, body{
    height: 100%;
    width: 100%;  
  }

  @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
  body {
    font-family: 'Roboto Mono', monospace;
  }

  .graph .labels.x-labels {
    text-anchor: middle;
  }

  .graph .labels.y-labels {
    text-anchor: end;
  }

  .graph {
    height: 500px;
    width: 800px;
  }

  .graph .grid {
    stroke: #ccc;
    stroke-dasharray: 0;
    stroke-width: 3;
  }

  .labels {
    font-size: 17px;
    font-weight: 400;
  }

  .label-title {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 15px;
    fill: black;
  }

  .data {
    fill: #f86d36;
    stroke-width: 1;
  }


  .graph .dot-joints {
    stroke: #f86d36;
    stroke-dasharray: 0;
    stroke-width: 3;
  }
  
    svg:hover .data,
    svg:hover .dot-joints.x-grid{filter:url(#f)}

Run Code Online (Sandbox Code Playgroud)

更新

OP 评论道：

你能更详细地解释一下吗

在<defs>我添加了一个 svg 过滤器。该滤镜首先创建模糊效果feGaussianBlur。您可能需要更改stdDeviation才能更改阴影的外观。

接下来是偏移先前创建的模糊feOffset：您可能需要更改dx="3"和 dy="1"属性才能移动阴影。

然后使用feFlood和feComposite为阴影添加颜色。在本例中，我使用半透明的黑色，但您可以使用您想要的颜色。

我使用此过滤器将阴影仅应用于您想要的那些元素：filter:url(#f)- 其中 f 是过滤器的 id

归档时间：	6 年，1 月前
查看次数：	695 次
最近记录：	6 年，1 月前