svg के लिए गोलाकार कोनों को सेट करना: छवि

Question

मैं s svg के लिए गोलाकार कोनों बनाने की कोशिश कर रहा था: छवि (छवि एसवीजी में एम्बेडेड) d3.js. के साथ। मैं यह नहीं समझ सकता कि छवि को सही तरीके से कैसे शैलीबद्ध किया जाए, क्योंकि डब्ल्यू 3 सी स्पेक के अनुसार मुझे सीएसएस का उपयोग करने में सक्षम होना चाहिए, लेकिन हंटर सीमा और न ही गोल किनारों मेरे लिए काम करते हैं।

अग्रिम धन्यवाद।

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"); 

संपादित करें:

ब्राउज़र का परीक्षण: फ़ायरफ़ॉक्स, क्रोम

Answer 1

'बॉर्डर-त्रिज्या' svg पर लागू नहीं होता: छवि तत्वों (अभी तक वैसे भी)। गोलाकार कोनों के साथ एक रेक्ट बनाने के लिए एक वर्कअराउंड होगा, और एक क्लिप-पथ का उपयोग करें।

An example।

स्रोत के प्रासंगिक भाग:

<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)"/> 

यह भी बजाय <use> उपयोग करने के कई रेक्ट तत्वों को बनाने के संभव है।

Answer 2

उन लोगों के लिए जो गोलाकार अवतार बनाने में रूचि रखते हैं, यहां डी 3 वी 4 का उपयोग करके एक उदाहरण दिया गया है। ध्यान दें कि छवि (0,0) पर क्लिपिंग को लागू करने की आवश्यकता है, इसलिए आपको उस छवि को()) अनुवाद करना होगा जहां आप इसे चाहते हैं।

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')