Блог

Главная - Вопросы по программированию - Встроенные разрывы SVG в Firefox в сочетании с векторным эффектом: без масштабирования-обводка

Встроенные разрывы SVG в Firefox в сочетании с векторным эффектом: без масштабирования-обводка

#css #firefox #svg

#HTML #css #svg

Вопрос:

У меня есть несколько встроенных SVG-файлов на веб-сайте, который я поддерживаю, и они сломаны в Firefox. Каждый разрывается при применении векторного эффекта: без масштабирования-обводка. Они все еще отображаются, но последние / первые точки, похоже, растянуты до верхней левой точки страницы.

например https://drive.google.com/file/d/1gY-SO2fbtDRb9AGfeLXvJg3oCKosdrKd/view?usp=sharing например https://drive.google.com/file/d/1lpua-qZyiDlcfFKjLfXWgP8wOa_tZh69/view?usp=sharing

Проблема, похоже, применима только к кругам, если я изменю тег на эллипс, например 

 <ellipse class="stroke-blue stroke-2 no-fill stroke-rounded non-scaling-stroke" cx="69.9" cy="60.1" rx="40.8" ry="40.8"/>

проблема исчезнет, а также, если я удалю векторный эффект

 e.g. <circle class="stroke-blue stroke-2 no-fill stroke-rounded" cx="69.9" cy="60.1" r="40.8"/>

Наведение курсора мыши на SVG также иногда устраняет проблему.

Codepen:https://codepen.io/anon/pen/WWQRqg

HTML:

   <svg version="1.1" id="parents-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
    <path class="stroke-blue stroke-2 no-fill non-scaling-stroke" d="M116.5,137.6c0,0-17.5-22.6-46.7-22.6c-32,0-52,24.1-58.9,43.9c0,0,25.8,19.8,56.9,19.8c20.2,0,32.4-5,32.4-5"/>
    <path class="stroke-blue stroke-2 no-fill grey-stroke-hover non-scaling-stroke" d="M109.8,166.3c0,0,15.3,13.5,39.5,13.5s39.8-13.5,39.8-13.5S178.9,137,149.5,137S109.8,166.3,109.8,166.3z"/>
    <circle class="stroke-blue stroke-2 no-fill stroke-rounded grey-stroke-hover non-scaling-stroke" cx="149.5" cy="100.4" r="27.1"/>
    <circle class="stroke-blue stroke-2 no-fill stroke-rounded non-scaling-stroke" cx="69.9" cy="60.1" r="40.8"/>
  </svg>

CSS:

 .non-scaling-stroke {
  vector-effect: non-scaling-stroke;
}

.stroke-2 {
    stroke-width: 2;
    stroke-miterlimit: 0;
}

.stroke-blue {
    stroke: #009bdf;
}

.no-fill {
    fill: none;
}

.stroke-rounded {
    stroke-linecap: round;
    stroke-linejoin: round;
}

Комментарии:

1. Недавно известная проблема. См bugzilla.mozilla.org/show_bug.cgi?id=1539129 и bugzilla.mozilla.org/show_bug.cgi?id=1538666

Ответ №1:

По-видимому, этого не произойдет, если вы используете путь вместо круга. Кроме того, поскольку в данный момент это ваш код, у вас есть повторяющийся id для элементов svg.

В следующем примере я использую функцию для создания круга в качестве пути. Если вы не хотите использовать javascript, вы можете получить атрибут d для пути из инспектора. Я надеюсь, что это поможет.

 const SVG_NS = "http://www.w3.org/2000/svg";



function drawCircle(cx, cy, r, parent) {
  let circle_path = document.createElementNS(SVG_NS, "path");
  let d = `M${cx   r},${cy} A${r},${r} 0 0 0 ${cx -
    r},${cy}  A${r},${r} 0 0 0 ${cx   r},${cy}z`;
  circle_path.setAttributeNS(null, "d", d);
  parent.appendChild(circle_path);
  return circle_path;
}


let circles = []

circles.push(drawCircle(149.5, 100.4, 27.1, circles1));
circles.push(drawCircle(69.9, 60.1, 40.8, circles1));
circles.push(drawCircle(149.5, 100.4, 27.1, circles2));
circles.push(drawCircle(69.9, 60.1, 40.8, circles2));

circles.map(c=>{
  c.setAttribute("class", "stroke-blue stroke-2 no-fill stroke-rounded grey-stroke-hover non-scaling-stroke")
})  
 /* Start the magic css for locking down svg stroke width */

.non-scaling-stroke {
  vector-effect: non-scaling-stroke;
}

/* End magic */

.blue-fill {
    fill: #009bdf;
}

.stroke-2 {
    stroke-width: 2;
    stroke-miterlimit: 0;
}
.stroke-blue {
    stroke: #009bdf;
}
.no-fill {
    fill: none;
}
.stroke-rounded {
    stroke-linecap: round;
    stroke-linejoin: round;
}  
 <div style="width: 200px">
  
                        <svg version="1.1" id="parents_icon1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
                          <path class="stroke-blue stroke-2 no-fill non-scaling-stroke" d="M116.5,137.6c0,0-17.5-22.6-46.7-22.6c-32,0-52,24.1-58.9,43.9c0,0,25.8,19.8,56.9,19.8c20.2,0,32.4-5,32.4-5"/>
                          <path class="stroke-blue stroke-2 no-fill grey-stroke-hover non-scaling-stroke" d="M109.8,166.3c0,0,15.3,13.5,39.5,13.5s39.8-13.5,39.8-13.5S178.9,137,149.5,137S109.8,166.3,109.8,166.3z"/>
                          <!--<circle class="stroke-blue stroke-2 no-fill stroke-rounded grey-stroke-hover non-scaling-stroke" cx="149.5" cy="100.4" r="27.1"/>
                          <circle class="stroke-blue stroke-2 no-fill stroke-rounded non-scaling-stroke" cx="69.9" cy="60.1" r="40.8"/>-->
                        
  
<g id="circles1">  
</g>  
  
  
  
  </svg>
  
</div><div style="width: 200px">
  
                        <svg version="1.1" id="parents_icon2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
                          <path class="stroke-blue stroke-2 no-fill non-scaling-stroke" d="M116.5,137.6c0,0-17.5-22.6-46.7-22.6c-32,0-52,24.1-58.9,43.9c0,0,25.8,19.8,56.9,19.8c20.2,0,32.4-5,32.4-5"/>
                          <path class="stroke-blue stroke-2 no-fill grey-stroke-hover non-scaling-stroke" d="M109.8,166.3c0,0,15.3,13.5,39.5,13.5s39.8-13.5,39.8-13.5S178.9,137,149.5,137S109.8,166.3,109.8,166.3z"/>
                          <!--<circle class="stroke-blue stroke-2 no-fill stroke-rounded grey-stroke-hover non-scaling-stroke" cx="149.5" cy="100.4" r="27.1"/>
                          <circle class="stroke-blue stroke-2 no-fill stroke-rounded non-scaling-stroke" cx="69.9" cy="60.1" r="40.8"/>-->
                        
  
<g id="circles2">  
</g>    
  </svg>
  
</div>