सीएसएस

Question

के साथ स्टाइल एसवीजी सर्कल तो मेरे पास मेरा एसवीजी-सर्कल है।

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="168" cy="179" r="59" fill="white" /> 
</svg> 

मैं सर्कल को घुमाने पर 120% होना चाहता हूं। मैंने चौड़ाई, ऊंचाई और स्ट्रोक दोनों की कोशिश की। होवरिंग करते समय सर्कल को बड़ा बनाने के लिए कोई समाधान नहीं मिला है। कोई सुझाव?

circle:hover 
    { 
    stroke-width:10px; 
    } 

circle:hover 
    { 
    height: 120%; 
    width: 120%; 
    } 

Answer 1

प्रति एसवीजी 1.1 विनिर्देश के रूप में आप शैली नहीं दे सकते सीएसएस https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties का उपयोग कर एक एसवीजी वृत्त के r विशेषता। लेकिन आप कर सकते हैं:

<circle cx="168" cy="179" r="59" 
     fill="white" stroke="black" 
     onmouseover="evt.target.setAttribute('r', '72');" 
     onmouseout="evt.target.setAttribute('r', '59');"/> 

एसवीजी 2, जो आंशिक रूप से कुछ आधुनिक ब्राउज़रों द्वारा समर्थित है में, आप सीएसएस का उपयोग कर हलकों की r विशेषता शैली दे सकते हैं। https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes

Answer 2

मुझे यकीन नहीं है, लेकिन आप केवल सीएसएस के साथ एक एसवीजी को पूर्ण कस्टम नहीं कर सकते हैं। हालांकि, यदि आप करेंगे तो यह क्रॉस ब्राउज़र नहीं होगा। अतीत में मैंने एक जटिल मानचित्र बनाने के लिए svg का उपयोग किया था और मेरे लिए समाधान rapheljs था।

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

त्रिज्या मैं कोड को संशोधित करने के लिए @phonicx पथरी का उपयोग करना, something जो प्रत्येक चक्र को अनुकूलित करने में सक्षम है होने (मामले में आप अधिक है तो):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle data-precentage='100' cx="168" cy="179" r="59" fill="red" /> 
    <circle data-precentage='120' cx="74" cy="100" r="59" fill="black" /> 
</svg> 

Answer 3

यह चाहिए आप के लिए काम करता हूं।

jsfiddle

आप त्रिज्या में हेरफेर करने की जरूरत है और यह केवल जावास्क्रिप्ट के माध्यम से किया जा सकता है:

$(function() { 
    $("svg circle").on("mouseenter", function() { 

     var oldR = $(this).attr("r"); 

     var newR = (((oldR*2)/100)*120)/2; // 120% width 

     $(this).attr("r", newR); 

    }); 
}); 

Answer 4

2 हलकों है, एक बड़ा दृश्यता बनाने: छिपा हुआ या प्रदर्शन: कोई नहीं। होवर पर, बड़ा दृश्यमान और छोटा अदृश्य बनाओ।

Answer 5

इस का उपयोग करें:

$(function() { 
$('circle').hover(function() { 
$(this).attr('r',100); 
},function(){ 
$(this).attr('r',59); 
}); 
}); 

Demo Here

Answer 6

केवल सीएसएस का उपयोग करना चाहते हैं? circle के बजाय line का उपयोग करें।

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <style> 
    .circle { 
     stroke-width: 59; 
     stroke-linecap: round; 
    } 
    .circle:hover { 
     stroke-width: 71; 
    } 
    </style> 
    <line x1="168" y1="179" x2="168" y2="179" stroke="white" class="circle" /> 
</svg> 

http://jsfiddle.net/rLk7rd8b/

Answer 7

फिलिप टिप्पणी में सुझाव दिया जैसा कि ऊपर आप सीएसएस 3 को बदलने के साथ ऐसा कर सकते हैं।

circle:hover { 
    -webkit-transform: scale(x, y); 
    } 

("-webkit" उपसर्ग क्रोम के लिए ही है)

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

देखें यहाँ सीएसएस बदलाव के साथ एक काम कर उदाहरण भी है: http://jsbin.com/sozewiso/2

Answer 8

आप स्ट्रोक रंग भूल गया:

circle:hover { 
    stroke:white; 
    stroke-width:10px; 
} 

Answer 9

सुनिश्चित नहीं है कि पर्सो n अभी भी उत्तरों की तलाश में है, लेकिन किसी और के लिए, यह सर्कल की ट्रांसफॉर्म-उत्पत्ति को अपने केंद्र में सेट करके सीएसएस (3) में किया जा सकता है।

circle { 
    transform-origin: 168px 179px; 
    transform: scale(1,1); 

}

circle:hover 
{ 
stroke-width:10px; 
transform:scale(1.2,1.2); 
} 

चेतावनी सीएसएस जा रहा है अब आयामों के साथ युग्मित है और हम एसवीजी में वृत्त के ठीक मध्य में पता करने की है।

Answer 10

मैं कुछ और पर काम कर रहा था और इस सवाल पर आया था। मैं कुछ ऐसा कर रहा हूं और ग्रीन्सॉक का उपयोग कर रहा हूं। मैंने ग्रीन्सॉक, जीएसएपी का उपयोग करके दो सर्किलों पर पैमाने को एनिमेट किया। मैं tranformOrigin और बड़े पैमाने संपत्ति चेतन करने के लिए आवश्यक:

TweenMax.staggerFrom(".circle",1,{scale:0,transformOrigin:"50% 50%",ease:Bounce.easeOut}, .08); 

उदाहरण https://codepen.io/grmdgs/pen/RgjdPv

Greensock https://greensock.com/