Einstellung abgerundete Ecken für svg:Bild

War ich versucht zu machen, abgerundete Ecken für s svg:image (Bild eingebettet in SVG) mit d3.js. Ich kann nicht herausfinden, wie man richtig Stil das Bild, denn laut W3C-spec, ich sollte in der Lage sein, CSS zu benutzen, aber neighter Grenze noch abgerundete Kanten für mich arbeiten.

Vielen Dank im Voraus.

  vis.append("svg:image")
     .attr("width", width/3)
     .attr("height", height-10)
     .attr("y", 5)
     .attr("x", 5)      
     .attr("style", "border:1px solid black;border-radius: 15px;")
     .attr("xlink:href",
           "http://www.acuteaday.com/blog/wp-content/uploads/2011/03/koala-australia-big.jpg");

Edit:

Browsern getestet: Firefox, Chrome

InformationsquelleAutor malejpavouk | 2011-09-15
  1. 26

    'border-radius' nicht gelten zu svg:image-Elemente (noch jedenfalls). Eine Abhilfe wäre zu schaffen, ein Rechteck mit abgerundeten Ecken, und verwenden Sie einen clip-Pfad.

    Ein Beispiel.

    Den entsprechenden Teil der source:

    <defs>
    <rect id="rect" x="25%" y="25%" width="50%" height="50%" rx="15"/>
    <clipPath id="clip">
      <use xlink:href="#rect"/>
    </clipPath>
  </defs>

  <use xlink:href="#rect" stroke-width="2" stroke="black"/>
  <image xlink:href="boston.jpg" width="100%" height="100%" clip-path="url(#clip)"/>

    Es ist auch möglich, mehrere rect-Elemente anstatt <use>.

    • Ich habe Probleme bei der Implementierung dieser in d3.js code... @malejpavouk, haben Sie weitere konkrete code-Beispiele, die von Ihrer Implementierung, so dass ich Sie hinzufügen können, Bilder mit abgerundeten Ecken, um meine d3 Visualisierung?
    • Meine app ist etwas komplizierter, aber der code, den Sie brauchen, ist die Kopie eingefügt werden aus der Beispiel-gepostet von Erik (wenn ich mich richtig erinnere ohne signifikante Veränderung).
    • ist diese Arbeit auch außerhalb der d3.js? Ich benutze es auf andere Orte, und es funktioniert nicht.
    InformationsquelleAutor Erik Dahlström
  2. 3

    Für diejenigen, die nur daran interessiert, mit abgerundeten Avatare, geht hier ein Beispiel mit d3 v4. Beachten Sie, dass Sie müssen, um die clipping, während das Bild bei (0,0), so dass Sie brauchen, um zu übersetzen() das Bild, wo Sie wollen es.

    import { select } from 'd3-selection';

const AVATAR_WIDTH = 80;
const avatarRadius = AVATAR_WIDTH / 2;
const svg = select('.my-container');
const defs = this.svg.append("defs");
defs.append("clipPath")
  .attr("id", "avatar-clip")
  .append("circle")
  .attr("cx", avatarRadius)
  .attr("cy", avatarRadius)
  .attr("r", avatarRadius)
svg.append("image")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", AVATAR_WIDTH)
  .attr("height", AVATAR_WIDTH)
  .attr("xlink:href", myAvatarUrl)
  .attr("clip-path", "url(#avatar-clip)")
  .attr("transform", "translate(posx, posy)")
  .append('My username')
    InformationsquelleAutor Nacho Coloma
Schreibe einen Kommentar