logo标签列表

给SVG元素添加阴影，比如线条

htmlcsssvg
4
我对SVG比较新，但我开始尝试制作一个图表。这个图表来自这里。我已经搜索了数小时，只找到了一半的解决方法。从代码片段中可以看出，当你悬停在图表上时，它会“发光”。但是我希望只有圆和连接点在我悬停在它们上面时才会发光。
我尝试过：
  1. 使用常规CSS阴影
  2. 使用使图表“发光”的代码，但仅在g元素上。
  3. 创建单独的SVG：a）在主SVG中 b）单独，然后用position: absolute混合它们。（之后定位效果奇怪）

What should I do to make only the circles and the joints "glow"? 

  *{
    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);
  }
<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>

1个回答
4

希望这是您需要的：我正在使用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)}
<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>

或者你可能更喜欢这个:

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

悬停在 SVG 元素上时，对线条和圆形应用阴影。 

*{
    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)}
<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>

更新

原帖作者评论：

你能详细地解释一下吗？

在<defs>中添加了一个svg滤镜。这个滤镜首先创建了一个模糊的feGaussianBlur。您可能需要更改stdDeviation以改变阴影的外观。

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

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

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

这正是我所需要的！你能详细解释一下吗？ - ferenc kalauz
我已经更新了答案并附上了解释，请查看。 - enxaneta
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接