Как сделать тени SVG символов - PullRequest
Новая
       34

Как сделать тени SVG символов

0 голосов
/ 17 июня 2020

Я попытался добавить фильтр к пути, используя svg.symbols, но он не появился.

Это мой код 

				let namngu = d3.select("body")
        .append("svg")
        .attr("width", "5000")
        .attr("height", "5000");
        let namnguvcl = namngu.append("defs")
        let filter = namnguvcl.append("filters")
        .attr("id", "drop-shadow-line");

      filter.append("feGaussianBlur")
      .attr("in","SourceAlpha")
      .attr("stdDeviation",4)

      let namnhuconbo = filter.append("feMerge")
      namnhuconbo.append("feMergeNode")
      namnhuconbo.append("feMergeNode")
      .attr("in","SourceGraphic")

     let namngunhucho = namnguvcl.append("symbol") 
      .attr("id","may")
      .attr("preserveAspectRatio", "none")
      .attr("viewBox", "0 0 17275 8599")
      
       namngunhucho.append("svg:path")
       .attr("d", "M 5097.99967 2512.5 q 67 -30 134 0")
       .attr("style", "fill: transparent; stroke: blue")
       
    namngu.append("use")
    .style("filter", "url(#drop-shadow-line)")
    .attr("xlink:href","#may")
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
https://jsfiddle.net/pn9ta08w/

Это то, что я пытаюсь воспроизвести https://jsfiddle.net/fonwrspj/3/

Как это исправить? Спасибо

1 Ответ

1 голос
/ 17 июня 2020

Ошибки в результирующем коде SVG:

  1. В вашем коде <filters> вместо <filter>

  2. Символ имеет ViewBox, но у элемента use нет ширины и высоты

  3. Элемент svg огромен и не имеет атрибута viewBox

  4. Атрибут viewBox элемента символ огромен по сравнению с ограничивающим прямоугольником фигуры.

После исправления всего этого фильтр применяется. 

svg{border:solid}
<svg viewBox="0 0 150 75">
  <defs>
    <filter id="drop-shadow-line" y="-1" height="20">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"></feGaussianBlur>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
    <symbol id="may" preserveAspectRatio="none" viewBox="5090 2490 150 50">    
      <path d="M 5097.99967 2512.5 q 67 -30 134 0" style="fill:transparent; stroke: blue"></path>
    </symbol>
  </defs>
  <use xlink:href="#may"  width="150" height="150" style="filter: url('#drop-shadow-line')" />
</svg>
...