Ich habe versucht, abgerundete Ecken für s Svg: Bild (Bild in SVG eingebettet) mit d3.js zu machen. Ich kann nicht herausfinden, wie man das Bild richtig stylt, weil ich nach W3C-Spezifikation in der Lage sein sollte, CSS zu verwenden, aber wide Grenze oder abgerundete Kanten funktionieren für mich.
Vielen Dank im Voraus.
%Vor%Bearbeiten:
Getestete Browser: Firefox, Chrome
'border-radius' gilt nicht für svg: image elements (und trotzdem). Ein Workaround wäre, ein Rechteck mit abgerundeten Ecken zu erstellen und einen Clip-Pfad zu verwenden.
Der relevante Teil der Quelle:
%Vor% Es ist auch möglich, mehrere rect-Elemente zu erstellen, anstatt <use> zu verwenden.
Für diejenigen, die nur daran interessiert sind, abgerundete Avatare zu erstellen, hier ein Beispiel mit d3 v4. Beachten Sie, dass Sie den Ausschnitt anwenden müssen, während das Bild bei (0,0) ist, so dass Sie das Bild dorthin übersetzen müssen, wo Sie es haben möchten.
%Vor%Tags und Links javascript css svg d3.js
