jquery - SVG hover with transition -


I have recently started learning SVG I tried to create a circle with some text inside. Here's my code: 

  & lt; Div class = "main_circle" & gt; & Lt; A href = "#" & gt; & Lt; Svg height = "392" width = "392" id = "svg_circle" & gt; & Lt; Circle cx = "196" cy = "1 9 6" r = "1 9 4" square = "circle 1" id = "circle1" /> & Lt; Text x = "70" y = "100" font-size = "30" fill = "#fff"> & Lt; Tspan font-family = "Ubuntu, without-serif" font-weight = "100" & gt; Some text & lt; / Tspan & gt; Sorry, your browser does not support inline SVG. & Lt; / Svg & gt; & Lt; / A & gt; & Lt; Script & gt; $ ("#svg_circle") .hor (function () {$ ("# circle1"). Attr ({r: "150"})}} $ ("# svg_circle") .mouseleave (function () {$ ("# Circle1"). Attr ({r: "194"}}}}

It should be small when I rotate it and the text disappears, if possible, I received it to minimize, but I want to transition to look good. If someone can help me, then appreciate it.

Animate text opacity and position For the keyword, use g tags by using circle and text to group a : hover event Attach, animate from 1 to filling-opacity to #text and conversion <0> and conversion: To move the translation (0, 100px) above 100px .

Code> tags and can start the animation on mouseenter and mo Useleave / <>

var size = document.getElementById ('size'); Shape.addEventListener ('mouseenter', function () {document.getElementById ('shrink'). BeginElement ();}); Shape.addEventListener ('mouseleave', function () {document.getElementById ('moving'). BeginElement ();}); 
  #shape #text {transitions: all 0.5s ease; } # Shape: hover # text {fill-opacity: 0; Conversion: Translation (0, 100px); }  
  & lt; Div class = "main_circle" & gt; & Lt; Svg height = "392" width = "392" id = "svg_circle" & gt; & Lt; G id = "size" & gt; & Lt; A xlink: href = "#" & gt; & Lt; Circle cx = "196" cy = "196" r = "1 9 4" square = "circle" id = "circle" /> & Lt; Anime ID = "Shrink" Xlink: Start the "=" 150 "Fear =" 0.5 "" = "0" "attribute type =" XML "attribute type =" XML "attribute name =" R "=" 194 "= =" indefinite " "Freeze" double encrypt = "1" /> & Lt; Id = "increase" xlink: href = "# circle" attributeType = "XML" attributeName = "r" = "150" = "194" dur = "0.5s" start = "unsure" fill = "freeze" repeat = "1" /> & Lt; Text id = "text" font-family = "Ubuntu", sans-serif "opacity =" 1 "font-weight =" 100 "x =" 196 "y =" 1 9 6 "text-anchor =" medium "font  Lt; / div>


Comments

Post a Comment

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
Read more

html - CSS autoheight, but fit content to height of div -

I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
Read more

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
Read more