W tym Jsfiddle Mam dwa rasy SVG. Pierwszy jeden wewnątrz znacznika SVG, drugi świadczony z Raphael JS. Oba rąki powinny być identyczne z podwójnymi granicami, ale nie są. Używanie node.setAttribute w Rafael JS ma ustawić atrybut niskiego poziomu SVG, więc powinien działać. Tutaj tutaj brakuje?

<svg height="100" width="100">
  <rect class="rect2" height="50" width="50" x='25' y='25' />
</svg>

<div id="the_canvas"></div>


.rect2 {
  fill: none;
  outline: 2px double black;
  outline-offset: 0;
}


var w = 100, h = 100;
var paper = Raphael("the_canvas", w, h); 

var rect = paper.rect(25,25,50,50);
rect.node.setAttribute('fill', 'none');
rect.node.setAttribute('outline','2px double black');
rect.node.setAttribute('outline-offset', 0);
0
ps0604 1 grudzień 2019, 13:48

1 odpowiedź

Najlepsza odpowiedź

To nie jest problem Raphaela, to sposób, w jaki działa SVG.

Kontur i przesunięcie konturu nie są mapowanymi atrybutami SVG. To znaczy. nie odwzorowują właściwości CSS. W rzeczywistości żadna z tych właściwości CSS nie powinna tak naprawdę robić niczego w SVG (nie są wymienione w specyfikacji SVG).

Przeglądarki istnieją głównie po to, aby renderować HTML, czasami rzeczy, które powinny działać w HTML, przelewają się do SVG, gdy nie powinny tam działać.

1
Robert Longson 1 grudzień 2019, 14:04