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
Michael Caveney
50,144 PointsMaking SVG text disappear
I'm working on a project, and part of it involves making text on an SVG disappear when it gets underneath a certain screen width. I've run the code through a validator, and it shows no errors. The class I want to target is all elements with the ".st1" class in the path. Code is as follows.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pembroke Welsh Corgis</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:700,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<header>
<nav>
<ul>
<li>
<a href="#"> <img src="images/nav-heart.png" alt="Navigation Home Icon" height="13px"> Home</a>
</li>
<li>
<a href="#">
<img src="images/nav-location.png" alt="Navigation Visit Us Icon" height="14px">
<span> Visit Us </span>
</a>
</li>
<li>
<a href="#">
<img src="images/nav-contact.png" alt="Navigation Contact Icon" height="13px">
<span> Contact </span>
</a>
</li>
</ul>
</nav>
<img src="svgs/logo.svg" alt="Pawprint logo" class="logo">
<h1>
Pembroke Welsh Corgi
</h1>
<p>
Lorem ipsum dolor sit amet spike house train litter vaccination swimming purr kitten wet nose bird food. Puppy carrier purr whiskers fur litter licks wagging vitamins foot good boy Rover swimming.
</p>
</header>
<main>
<h2>
Coat Colors
</h2>
<ul>
<li>
<img src="images/corgi-red.png" alt="Corgi Coat Red">
<br>
<span> Red </span>
</li>
<li>
<img src="images/corgi-fawn.png" alt="Corgi Coat Fawn">
<br>
<span> Fawn </span>
</li>
<li>
<img src="images/corgi-sable.png" alt="Corgi Coat Sable">
<br>
<span> Sable </span>
</li>
<li>
<img src="images/corgi-blacktan.png" alt="Corgi Coat Black and Tan">
<br>
<span> Black and Tan </span>
</li>
</ul>
<p>
Lorem ipsum dolor sit amet spike house train litter vaccination swimming purr kitten wet nose bird food. Puppy carrier purr whiskers fur litter licks wagging vitamins foot good boy Rover swimming. Mouse swimming small animals run fast house train bird food fetch. Harness tabby kitten parakeet litter dragging food. Ball biscuit toy water dog vaccination finch dog house grooming throw furry feathers aquarium tail stripes. Cockatiel fetch field fetch brush tooth hamster bed kitty ferret gimme five stay dinnertime catch warm.
</p>
</main>
<footer>
Site by Corgi Fan, 2015.
</footer>
</div> <!-- container -->
</body>
</html>
the CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: 'Roboto Slab', serif;
font-weight: 300;
color: #111;
background: url('svgs/background.svg') #edeff0;
background-size: 53px 50px;
}
#container {
max-width: 960px;
background: #fff;
margin: 0 auto;
}
p {
max-width: 350px;
margin: 35px auto 0;
line-height: 2em;
text-align: left;
}
a {
text-decoration: none;
color: #39add1;
font-weight: 700;
}
a:hover {
color: #111;
}
header {
padding-top: 10px;
}
header nav {
padding-bottom: 50px;
text-align: left;
}
header nav ul li {
display: inline-block;
margin-right: 20px;
}
header h1 {
line-height: 1em;
}
main {
padding-top: 50px;
}
main h2 {
font-size: 28px;
}
main ul {
padding: 0;
}
main li {
display: inline-block;
color: #ba8058;
margin-right: 20px;
}
main li img {
margin-bottom: 15px;
}
main li span {
margin-left: -40px;
}
main li:last-child {
margin-right: 0;
}
footer {
width: 100%;
margin-top: 100px;
padding-bottom: 30px;
color: #ba8058;
}
.altlogo {
opacity: 0;
}
.logo {
width: 140px;
height: 120px;
}
@media only screen and (max-width: 419px) {
.altlogo {
opacity: 1;
}
.st1 {
opacity: 0;
}
}
and the source code the the SVG in question:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 140 120" style="enable-background:new 0 0 140 120;" xml:space="preserve">
<style type="text/css">
.st0{fill:#BA8058;}
.st1{fill:#EAAA7F;}
.st2{fill:#F4C6A6;}
</style>
<g>
<ellipse class="st0" cx="70.4" cy="69.9" rx="50.4" ry="50.1"/>
</g>
<g >
<path class="st1" d="M0.6,62.5C0.8,61,1.3,59.8,2.1,59s1.9-1.2,3.1-1.1C6.4,58,7.3,58.5,8,59.5c0.7,1,0.9,2.2,0.8,3.7l-0.2,2.2
l1.6,0.2l0.5-1.6l1.8,0.2l-0.6,6.1l-1.8-0.2L10,68.5l-7.7-0.7l-0.5,1.6L0,69.2l0.1-1.6L0.6,62.5z M6.3,65.2l0.2-2.2
c0.1-0.6-0.1-1.1-0.4-1.5c-0.3-0.4-0.7-0.6-1.2-0.7c-0.5,0-0.9,0.1-1.3,0.4c-0.4,0.3-0.6,0.8-0.7,1.4l-0.2,2.2L6.3,65.2z"/>
<path class="st1" d="M11.2,58.3l0.1-0.8l-8.4-6.7l1-3.1L14.6,47l0.4-0.8l1.7,0.5l-1.4,4.4l-1.6-0.5l0.1-0.7l-1.3,0l-1.2,3.8
l1.1,0.8l0.4-0.6l1.6,0.5l-1.4,4.4L11.2,58.3z M9.6,52.5l0.8-2.5l-3.8,0.2l0,0.1L9.6,52.5z"/>
<path class="st1" d="M15.9,28.2L15.5,29l7.4,7.1l-1.5,2.5l-7-2l0,0.1l5.1,5.1L18,44.4l-9.8-3.1L7.6,42L6,41l2.7-4.4l1.6,0.9
l-0.4,1.2l5.1,1.9l0-0.1l-5.4-5.4l1.3-2.1l7.2,2.2l0-0.1L14,31.7l-0.8,0.9l-1.6-0.9l2.7-4.4L15.9,28.2z"/>
<path class="st1" d="M25.3,16.4c1.2-1,2.3-1.5,3.5-1.5c1.2,0,2.2,0.4,3,1.3c0.8,0.9,1.1,2,0.9,3.1c-0.2,1.2-0.9,2.3-2,3.2L29,24.1
l1.1,1.2l1.4-0.8l1.2,1.4l-4.7,4l-1.2-1.4l1-1.3l-5-5.9l-1.4,0.8l-1.2-1.4l1.2-1L25.3,16.4z M27.5,22.3l1.7-1.4
c0.5-0.4,0.8-0.9,0.8-1.4c0.1-0.5-0.1-0.9-0.4-1.3c-0.3-0.4-0.7-0.6-1.3-0.6c-0.5,0-1,0.2-1.5,0.6l-1.7,1.4L27.5,22.3z"/>
<path class="st1" d="M36.8,8.7c1.3-0.7,2.5-1,3.6-0.8c1.1,0.2,1.9,0.7,2.4,1.7c0.3,0.6,0.4,1.2,0.3,1.7c-0.1,0.6-0.4,1.2-0.8,1.8
c0.7-0.2,1.4-0.1,1.9,0.2c0.5,0.3,0.9,0.7,1.3,1.3l0.3,0.6l0.9-0.3l0.9,1.6L44.7,18c-0.3,0-0.6-0.1-0.8-0.4
c-0.2-0.3-0.4-0.6-0.6-0.9L42.9,16c-0.3-0.5-0.6-0.8-1-0.9c-0.4-0.1-0.8,0-1.3,0.2L39,16.2l1,1.9l1.5-0.5l0.9,1.6l-5.4,2.9
l-0.9-1.6l1.2-1l-3.7-6.8l-1.5,0.5l-0.9-1.6l1.3-0.7L36.8,8.7z M37.9,14.2l1.5-0.8c0.5-0.3,0.8-0.6,1-1c0.1-0.4,0.1-0.8-0.1-1.2
c-0.2-0.4-0.5-0.6-1-0.7c-0.4-0.1-0.9,0-1.4,0.3l-1.5,0.8L37.9,14.2z"/>
<path class="st1" d="M44.9,6.8l-0.6-1.7l5.9-2l0.6,1.7l-1.4,0.8l2.6,7.3l1.6-0.2l0.6,1.7l-5.9,2l-0.6-1.7l1.4-0.8l-2.6-7.3
L44.9,6.8z"/>
<path class="st1" d="M66.5,0l0.3,1.8l-1.5,0.5l1.5,9.7l-3,0.5l-5.7-6.6l-0.1,0l0.8,5.2l1.6,0.1l0.3,1.8l-6.1,0.9l-0.3-1.8l1.5-0.5
l-1.2-7.6L53,3.9l-0.3-1.8l1.6-0.2l3-0.5L63,7.9l0.1,0l-0.8-5.1l-1.6-0.1l-0.3-1.8l4.5-0.7L66.5,0z"/>
<path class="st1" d="M81.1,0.9l-0.3,3.8l-2.3-0.2l0-1.5l-1.9-0.1L76,10.4l1.6,0.4l-0.1,1.8l-6.2-0.5l0.1-1.8l1.6-0.2l0.6-7.5
l-1.9-0.1L71.4,4l-2.3-0.2L69.4,0L81.1,0.9z"/>
<path class="st1" d="M89,4.5l0.7-1.7L95,4.9l-0.7,1.7l-1.2-0.1l-1,2.5L93,9.2l2.7-2.1l-0.6-0.4l0.7-1.7l5.1,2l-0.7,1.7L99,8.6
l-3.6,2.3l1.1,5.1l0.9,0.6l-0.6,1.7l-5.1-2l0.6-1.7l0.6,0.1l-0.6-3.2l-1-0.4l-0.9,2.4l1,0.7L90.7,16l-5.4-2.1l0.6-1.7l1.6,0.3
l2.8-7.2L89,4.5z"/>
<path class="st1" d="M97.1,18.6l1-1.5l1.5,0.6l4.2-6.5l-1.2-1.1l1-1.5l1.3,0.9l7.3,4.7l-2,3.1l-1.9-1.2l0.6-1.2l-2.8-1.8l-1.4,2.2
l4,2.6l-1,1.6l-4-2.6l-1.6,2.4L105,21l0.8-1.1l1.9,1.2l-2,3L97.1,18.6z"/>
<path class="st1" d="M125.1,26.3l-1.3,1.3l-1.3-0.9l-7.1,6.9l-2.1-2.1l2-8.5l-0.1,0l-3.8,3.7l0.9,1.4l-1.3,1.3l-4.3-4.4l1.3-1.3
l1.3,0.9L115,19l-0.9-1.4l1.3-1.3l1.1,1.1l2.1,2.1l-2,8.4l0.1,0l3.7-3.6l-0.9-1.4l1.3-1.3l3.2,3.3L125.1,26.3z"/>
<path class="st1" d="M134,40.9l-1.6,0.9l-1.1-1.2l-8.5,4.9l-1.5-2.6l4-7.7l0,0l-4.5,2.6l0.5,1.5l-1.6,0.9l-3.1-5.3l1.6-0.9l1.1,1.2
l6.7-3.9l-0.5-1.5l1.6-0.9l0.8,1.4l1.5,2.6l-4,7.7l0,0l4.5-2.6l-0.5-1.5l1.6-0.9l2.3,4L134,40.9z"/>
<path class="st1" d="M123.7,47.3l1.7-0.5l0.8,1.4l7.4-2.3l-0.2-1.6l1.7-0.5l0.5,1.5l2.6,8.3l-3.5,1.1l-0.7-2.2l1.3-0.5l-1-3.2
l-2.5,0.8l1.4,4.5l-1.8,0.6l-1.4-4.5l-2.7,0.9l1,3.2l1.3-0.3l0.7,2.2l-3.5,1.1L123.7,47.3z"/>
<path class="st1" d="M127.1,58.3l1.8-0.2l0.5,1.6l7.7-0.9l0.1-1.6L139,57l0.2,1.6l0.3,3l0.2,1.6l-1.8,0.2l-0.5-1.6l-7.5,0.9l0.4,3
l1.5,0l0.3,2.3l-3.8,0.4L127.1,58.3z"/>
<path class="st1" d="M131,76.3c0.4,0,0.7-0.1,1-0.4c0.3-0.3,0.5-0.9,0.8-1.7c0.4-1.5,0.9-2.6,1.5-3.3c0.6-0.7,1.4-1,2.5-0.9
c1,0.1,1.8,0.6,2.4,1.5c0.6,0.9,0.8,2.1,0.7,3.5c-0.1,1.5-0.5,2.6-1.3,3.4c-0.7,0.8-1.7,1.1-2.8,1l-0.1,0l0.2-2.9
c0.5,0,0.9-0.1,1.2-0.3c0.3-0.3,0.5-0.7,0.5-1.4c0-0.6,0-1.1-0.2-1.3c-0.2-0.3-0.5-0.5-0.8-0.5c-0.4,0-0.7,0.1-1,0.4
c-0.3,0.3-0.5,0.9-0.8,1.9c-0.4,1.4-0.9,2.5-1.5,3.2c-0.6,0.7-1.4,1-2.5,0.9c-1.1-0.1-1.9-0.6-2.5-1.5c-0.6-1-0.8-2.2-0.7-3.7
c0.1-1.6,0.5-2.8,1.3-3.7c0.7-0.9,1.7-1.2,2.9-1.1l0.1,0l-0.2,2.9c-0.6,0-1,0.1-1.3,0.5c-0.3,0.4-0.4,0.9-0.5,1.6
c0,0.7,0,1.2,0.2,1.5C130.4,76,130.7,76.2,131,76.3z"/>
</g>
<g>
<path class="st2" d="M80.4,45.2c0,5.7-4.6,6.8-10.3,6.8c-5.7,0-10.3-1.1-10.3-6.8S64.4,35,70.1,35C75.8,35,80.4,39.6,80.4,45.2z"/>
<path class="st2" d="M45.7,83.1C45.7,69.7,56.7,65,70.1,65s24.4,4.7,24.4,18.1s-15.1,21.6-24.4,21.6
C61.2,104.7,45.7,96.5,45.7,83.1z"/>
<path class="st2" d="M104,64.1c-4,4-8.1,1.5-12.1-2.5s-6.5-8-2.5-12c4-4,10.5-4,14.6,0C108,53.6,108,60.1,104,64.1z"/>
<path class="st2" d="M51.5,49.6c4,4,1.5,8-2.5,12c-4,4-8.1,6.5-12.1,2.5c-4-4-4-10.5,0-14.5S47.4,45.6,51.5,49.6z"/>
</g>
</svg>
Any input would be greatly appreciated!
2 Answers
Nicholas D'Amico
Front End Web Development Techdegree Graduate 25,692 PointsHey Michael, I believe the problem is that you are not able to use opacity on an inline SVG, so what I did for this is set the transform scale to 0. Also, instead of targeting the st1 classes I assigned a class of .title to the <g> container element.
below is my code. I really hope this helps.
Nick D
g.title {
-webkit-transform: scale(0);
transform: scale(0);
}
<g class="title">
<path class="st1" d="M0.6,62.5C0.8,61,1.3,59.8,2.1,59s1.9-1.2,3.1-1.1C6.4,58,7.3,58.5,8,59.5c0.7,1,0.9,2.2,0.8,3.7l-0.2,2.2
l1.6,0.2l0.5-1.6l1.8,0.2l-0.6,6.1l-1.8-0.2L10,68.5l-7.7-0.7l-0.5,1.6L0,69.2l0.1-1.6L0.6,62.5z M6.3,65.2l0.2-2.2
c0.1-0.6-0.1-1.1-0.4-1.5c-0.3-0.4-0.7-0.6-1.2-0.7c-0.5,0-0.9,0.1-1.3,0.4c-0.4,0.3-0.6,0.8-0.7,1.4l-0.2,2.2L6.3,65.2z"/>
<path class="st1" d="M11.2,58.3l0.1-0.8l-8.4-6.7l1-3.1L14.6,47l0.4-0.8l1.7,0.5l-1.4,4.4l-1.6-0.5l0.1-0.7l-1.3,0l-1.2,3.8
l1.1,0.8l0.4-0.6l1.6,0.5l-1.4,4.4L11.2,58.3z M9.6,52.5l0.8-2.5l-3.8,0.2l0,0.1L9.6,52.5z"/>
<path class="st1" d="M15.9,28.2L15.5,29l7.4,7.1l-1.5,2.5l-7-2l0,0.1l5.1,5.1L18,44.4l-9.8-3.1L7.6,42L6,41l2.7-4.4l1.6,0.9
l-0.4,1.2l5.1,1.9l0-0.1l-5.4-5.4l1.3-2.1l7.2,2.2l0-0.1L14,31.7l-0.8,0.9l-1.6-0.9l2.7-4.4L15.9,28.2z"/>
<path class="st1" d="M25.3,16.4c1.2-1,2.3-1.5,3.5-1.5c1.2,0,2.2,0.4,3,1.3c0.8,0.9,1.1,2,0.9,3.1c-0.2,1.2-0.9,2.3-2,3.2L29,24.1
l1.1,1.2l1.4-0.8l1.2,1.4l-4.7,4l-1.2-1.4l1-1.3l-5-5.9l-1.4,0.8l-1.2-1.4l1.2-1L25.3,16.4z M27.5,22.3l1.7-1.4
c0.5-0.4,0.8-0.9,0.8-1.4c0.1-0.5-0.1-0.9-0.4-1.3c-0.3-0.4-0.7-0.6-1.3-0.6c-0.5,0-1,0.2-1.5,0.6l-1.7,1.4L27.5,22.3z"/>
<path class="st1" d="M36.8,8.7c1.3-0.7,2.5-1,3.6-0.8c1.1,0.2,1.9,0.7,2.4,1.7c0.3,0.6,0.4,1.2,0.3,1.7c-0.1,0.6-0.4,1.2-0.8,1.8
c0.7-0.2,1.4-0.1,1.9,0.2c0.5,0.3,0.9,0.7,1.3,1.3l0.3,0.6l0.9-0.3l0.9,1.6L44.7,18c-0.3,0-0.6-0.1-0.8-0.4
c-0.2-0.3-0.4-0.6-0.6-0.9L42.9,16c-0.3-0.5-0.6-0.8-1-0.9c-0.4-0.1-0.8,0-1.3,0.2L39,16.2l1,1.9l1.5-0.5l0.9,1.6l-5.4,2.9
l-0.9-1.6l1.2-1l-3.7-6.8l-1.5,0.5l-0.9-1.6l1.3-0.7L36.8,8.7z M37.9,14.2l1.5-0.8c0.5-0.3,0.8-0.6,1-1c0.1-0.4,0.1-0.8-0.1-1.2
c-0.2-0.4-0.5-0.6-1-0.7c-0.4-0.1-0.9,0-1.4,0.3l-1.5,0.8L37.9,14.2z"/>
<path class="st1" d="M44.9,6.8l-0.6-1.7l5.9-2l0.6,1.7l-1.4,0.8l2.6,7.3l1.6-0.2l0.6,1.7l-5.9,2l-0.6-1.7l1.4-0.8l-2.6-7.3
L44.9,6.8z"/>
<path class="st1" d="M66.5,0l0.3,1.8l-1.5,0.5l1.5,9.7l-3,0.5l-5.7-6.6l-0.1,0l0.8,5.2l1.6,0.1l0.3,1.8l-6.1,0.9l-0.3-1.8l1.5-0.5
l-1.2-7.6L53,3.9l-0.3-1.8l1.6-0.2l3-0.5L63,7.9l0.1,0l-0.8-5.1l-1.6-0.1l-0.3-1.8l4.5-0.7L66.5,0z"/>
<path class="st1" d="M81.1,0.9l-0.3,3.8l-2.3-0.2l0-1.5l-1.9-0.1L76,10.4l1.6,0.4l-0.1,1.8l-6.2-0.5l0.1-1.8l1.6-0.2l0.6-7.5
l-1.9-0.1L71.4,4l-2.3-0.2L69.4,0L81.1,0.9z"/>
<path class="st1" d="M89,4.5l0.7-1.7L95,4.9l-0.7,1.7l-1.2-0.1l-1,2.5L93,9.2l2.7-2.1l-0.6-0.4l0.7-1.7l5.1,2l-0.7,1.7L99,8.6
l-3.6,2.3l1.1,5.1l0.9,0.6l-0.6,1.7l-5.1-2l0.6-1.7l0.6,0.1l-0.6-3.2l-1-0.4l-0.9,2.4l1,0.7L90.7,16l-5.4-2.1l0.6-1.7l1.6,0.3
l2.8-7.2L89,4.5z"/>
<path class="st1" d="M97.1,18.6l1-1.5l1.5,0.6l4.2-6.5l-1.2-1.1l1-1.5l1.3,0.9l7.3,4.7l-2,3.1l-1.9-1.2l0.6-1.2l-2.8-1.8l-1.4,2.2
l4,2.6l-1,1.6l-4-2.6l-1.6,2.4L105,21l0.8-1.1l1.9,1.2l-2,3L97.1,18.6z"/>
<path class="st1" d="M125.1,26.3l-1.3,1.3l-1.3-0.9l-7.1,6.9l-2.1-2.1l2-8.5l-0.1,0l-3.8,3.7l0.9,1.4l-1.3,1.3l-4.3-4.4l1.3-1.3
l1.3,0.9L115,19l-0.9-1.4l1.3-1.3l1.1,1.1l2.1,2.1l-2,8.4l0.1,0l3.7-3.6l-0.9-1.4l1.3-1.3l3.2,3.3L125.1,26.3z"/>
<path class="st1" d="M134,40.9l-1.6,0.9l-1.1-1.2l-8.5,4.9l-1.5-2.6l4-7.7l0,0l-4.5,2.6l0.5,1.5l-1.6,0.9l-3.1-5.3l1.6-0.9l1.1,1.2
l6.7-3.9l-0.5-1.5l1.6-0.9l0.8,1.4l1.5,2.6l-4,7.7l0,0l4.5-2.6l-0.5-1.5l1.6-0.9l2.3,4L134,40.9z"/>
<path class="st1" d="M123.7,47.3l1.7-0.5l0.8,1.4l7.4-2.3l-0.2-1.6l1.7-0.5l0.5,1.5l2.6,8.3l-3.5,1.1l-0.7-2.2l1.3-0.5l-1-3.2
l-2.5,0.8l1.4,4.5l-1.8,0.6l-1.4-4.5l-2.7,0.9l1,3.2l1.3-0.3l0.7,2.2l-3.5,1.1L123.7,47.3z"/>
<path class="st1" d="M127.1,58.3l1.8-0.2l0.5,1.6l7.7-0.9l0.1-1.6L139,57l0.2,1.6l0.3,3l0.2,1.6l-1.8,0.2l-0.5-1.6l-7.5,0.9l0.4,3
l1.5,0l0.3,2.3l-3.8,0.4L127.1,58.3z"/>
<path class="st1" d="M131,76.3c0.4,0,0.7-0.1,1-0.4c0.3-0.3,0.5-0.9,0.8-1.7c0.4-1.5,0.9-2.6,1.5-3.3c0.6-0.7,1.4-1,2.5-0.9
c1,0.1,1.8,0.6,2.4,1.5c0.6,0.9,0.8,2.1,0.7,3.5c-0.1,1.5-0.5,2.6-1.3,3.4c-0.7,0.8-1.7,1.1-2.8,1l-0.1,0l0.2-2.9
c0.5,0,0.9-0.1,1.2-0.3c0.3-0.3,0.5-0.7,0.5-1.4c0-0.6,0-1.1-0.2-1.3c-0.2-0.3-0.5-0.5-0.8-0.5c-0.4,0-0.7,0.1-1,0.4
c-0.3,0.3-0.5,0.9-0.8,1.9c-0.4,1.4-0.9,2.5-1.5,3.2c-0.6,0.7-1.4,1-2.5,0.9c-1.1-0.1-1.9-0.6-2.5-1.5c-0.6-1-0.8-2.2-0.7-3.7
c0.1-1.6,0.5-2.8,1.3-3.7c0.7-0.9,1.7-1.2,2.9-1.1l0.1,0l-0.2,2.9c-0.6,0-1,0.1-1.3,0.5c-0.3,0.4-0.4,0.9-0.5,1.6
c0,0.7,0,1.2,0.2,1.5C130.4,76,130.7,76.2,131,76.3z"/>
</g>
Michael Caveney
50,144 PointsYou were mostly right. The issue wasn't the opacity, but the fact that the SVG wasn't inline. Thanks so much!