Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Michael Lawinger
Michael Lawinger
33,581 Points

Personal SVG Logo Animation

So I am animating my logo and the problem is once I wrapped the .svg in a <a> tag it added an underline. How do I remove that in CSS, I thought it would work by taking away the a {text-decoration). What is the solution?

----------- HTML <!DOCTYPE html> <html> <head> <base href="sychael.com"/> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <a href="http://www.twitter.com"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="505.409" height="496.034" viewBox="0, 0, 505.409, 496.034"> <g id="text" transform="translate(-0.256, -2.483)"> <text transform="matrix(1, 0, 0, 1, 260.522, 250)"> <tspan class="text" x="-122.666" y="139" font-family="Raleway-Black" font-size="396" fill="#91354C">S</tspan> </text> <path class="circle" d="M492.665,250.5 C492.665,380.185 386.466,485.517 255.197,485.517 C162.896,485.517 80.244,432.939 41.03,352.143 L13.256,346.702 L38.423,249.517 L17.729,250.5 C17.729,120.815 123.928,15.483 255.197,15.483 C386.466,15.483 492.665,120.815 492.665,250.5 z M452.311,250.5 C452.311,142.131 363.941,54.483 255.197,54.483 C146.452,54.483 58.083,142.131 58.083,250.5 L38.139,250.04 L102.276,327.652 L80.49,341.346 C113.607,406.136 181.16,445.199 255.197,446.517 C363.941,446.517 452.311,358.869 452.311,250.5 z" fill="#91354C"/> <path class="c-outline" d="M492.665,250.5 C492.665,380.185 386.466,485.517 255.197,485.517 C162.896,485.517 80.244,432.939 41.03,352.143 L13.256,346.702 L38.423,249.517 L17.729,250.5 C17.729,120.815 123.928,15.483 255.197,15.483 C386.466,15.483 492.665,120.815 492.665,250.5 z M452.311,250.5 C452.311,142.131 363.941,54.483 255.197,54.483 C146.452,54.483 58.083,142.131 58.083,250.5 L38.139,250.04 L102.276,327.652 L80.49,341.346 C113.607,406.136 181.16,445.199 255.197,446.517 C363.941,446.517 452.311,358.869 452.311,250.5 z" fill-opacity="0" stroke="#3C102B" stroke-width="6"/>--> </g> </svg> </a> 

   </body> 
</html>

----------- CSS

text

{ transform-origin: 50% 50%; transition: transform .7s ease-out; overflow: hidden; }

text:hover

{ transform: scale(1.02); }

.text { stroke: #3C102B; transition: .3s ease-out; }

.text:hover { fill: 7C102B; stroke-width: 6; }

a { text-decoration: none; }

1 Answer

Michael Lawinger
Michael Lawinger
33,581 Points

Never mind, I figured it out!