Help with html/css SVG file code

I see this html/css code here:

https://codepen.io/lukemeyrick/pen/qdxqwM/

When you mouse over a circle also appears.

I copied the html/css code to try to see how just triangle looks on an html page, but, was unsuccessful at just displaying that triangle image.

Any help will be appreciated.

We’d need to see the code which isn’t working in order to offer any suggestions as to what is wrong.

to be honest, when I add the code to my html page, I see nothing

If it works in the codepen and not on your page, there must be some difference between the two. Without seeing the non-working version, we can’t possibly know where the problem lies.

I see some ‘adobe’ wording, do I need an adobe plug-in for this, do you know?

Did you just copy the CSS from the codepen without noticing it’s SCSS? If you use the CSS from the “Direct code link” (under the “Change View” menu) it should work OK.

1 Like

Thanks for your help.
Much appreciated.
Can you suggest the simplest way to scale/shrink this?

Here is an example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }
.container {
    margin-top: 25vh;
    text-align: center;
 }

.playBut {
    display: inline-block;
    /*transition: all 0.5s ease;*/
 }
svg{}
.circle {
    stroke: #f8aa28;
    stroke-dasharray: 650;
    stroke-dashoffset: 650;
    opacity: 0.3;
    transition: all 0.5s ease-in-out;
 }

.triangle {
    stroke: #000;
    stroke-dasharray: 240;
    stroke-dashoffset: 480;
    transform: translateY( 0 ); 
    transition: all 0.7s ease-in-out;
   }
   

.playBut:hover .triangle,
.playBut:active .triangle {
    stroke: #f8aa28;
    stroke-dashoffset: 0;
    opacity: 1;
    animation: nudge 0.7s ;
 } 

.playBut:hover .circle,
.playBut:active .circle {
    stroke-dashoffset: 0;
    opacity: 1;
 }  
  
@keyframes nudge {
   0% {
        transform: translateX( 0 )  
      }
  30% {
        transform: translateX( -5px )
      }
  50% {
        transform: translateX( 5px )
      }
  70% {
        transform: translateX( -2px )
      }
 100% {
        transform: translateX( 0 )
      }
   }   
</style>

</head>
<body>
 
 <div class="container">
  <a href="#" class="playBut">
   <svg 
     version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     x="0" y="0" width="60" height="60"
     viewBox="0 0 220 220">

    <polygon 
       class="triangle" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" 
       points="73.5,62.5 148.5,105.8 73.5,149.1"/>
  
    <circle 
       class="circle" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" 
       cx="106.8" cy="106.8" r="103.3"/>
   </svg>
  </a>
 </div>

</body>
</html>

coothead

Thanks for all the replies.

I am only interested in the triangle, and not the circle, so I have eliminated some of the code and have tried to line up the triangle with some text, inline, without success (tried many things). see attached image. Here is the code currently:

<style media="screen">

.playBut {
    display: inline-block;
    /*transition: all 0.5s ease;*/
 }
svg{}

.triangle {
    stroke: #f96262;
    stroke-dasharray: 240;
    stroke-dashoffset: 480;
    transform: translateY( 0 );
    transition: all 0.7s ease-in-out;
   }


.playBut:hover .triangle,
.playBut:active .triangle {
    stroke: #865050;
    stroke-dashoffset: 0;
    opacity: 1;
    animation: nudge 0.7s ;
 }


@keyframes nudge {
   0% {
        transform: translateX( 0 )
      }
  30% {
        transform: translateX( -5px )
      }
  50% {
        transform: translateX( 5px )
      }
  70% {
        transform: translateX( -2px )
      }
 100% {
        transform: translateX( 0 )
      }
   }
</style>

		<div class="overlay" style="background-color: #ffffff;">
		   <div class="container" style="margin: -40px auto 5px auto;">
				<h1 class="text-center">
				 <a href="#" class="playBut">
				  <svg
				     version="1.1"
				     xmlns="http://www.w3.org/2000/svg"
				     x="0" y="0" width="65" height="65"
				     viewBox="0 0 220 220">

				    <polygon
				       class="triangle" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
				       points="73.5,62.5 148.5,105.8 73.5,149.1"/>
				   </svg></a>
				   <span style="color: #865050; font-weight:800;display: inline;">TEXT  </span></h1>

</div>
</div>

as you can see from the attached image the triangle appears above the TEXT.
Any help with lining up the triangle with the text horizontally (side-by-side) will be appreciated.

If you build and post a “working page”, we can tell how you have tested your code. I still recommend drawing outlines around boxes to see how they fit within the layout. Separate CSS (not inline CSS) is easier to follow. It is your obligation to center the svg within its viewbox.

Try this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>vertically center text and svg</title>
<!--
https://www.sitepoint.com/community/t/help-with-html-css-svg-file-code/331037/9
chrisjchrisj
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {
    padding:20px;
    margin:0;
}
.overlay {
    background-color:#fff;
}
.container {
    margin:0;
}
.text-center {
    text-align:center;
    outline:1px dashed blue;
}
.playBut {
    display: inline-block;
    /* transition: all 0.5s ease; */
    vertical-align:middle;
    outline:1px dotted green;
}
span {
    display:inline;
    color:#865050;
    font-weight:800;
    vertical-align:middle;
    outline:1px dotted red;
}
svg {}
.triangle {
    stroke: #f96262;
    stroke-dasharray: 240;
    stroke-dashoffset: 480;
    transform: translateY( 0 );
    transition: all 0.7s ease-in-out;
}
.playBut:hover .triangle,
.playBut:active .triangle {
    stroke: #865050;
    stroke-dashoffset: 0;
    opacity: 1;
    animation: nudge 0.7s ;
}
@keyframes nudge {
   0% {
        transform: translateX( 0 )
      }
  30% {
        transform: translateX( -5px )
      }
  50% {
        transform: translateX( 5px )
      }
  70% {
        transform: translateX( -2px )
      }
 100% {
        transform: translateX( 0 )
      }
}
    </style>
</head>
<body>

<div class="overlay" style="">
    <div class="container" style="">
        <h1 class="text-center">
            <a href="#" class="playBut">
                <svg
                    version="1.1"
				    xmlns="http://www.w3.org/2000/svg"
				    x="0" y="0" width="65" height="65"
				    viewBox="0 0 190 190">
				    <polygon
				       class="triangle" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
				       points="73.5,62.5 148.5,105.8 73.5,149.1"/>
				</svg>
            </a>
			<span style="">TEXT</span>
        </h1>
    </div>
</div>

</body>
</html>
1 Like

Much thanks for your reply. Very helpful.
It worked successfully, so I tried to apply it elsewhere without success:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>vertically center text and svg</title>
<style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}

svg{}

.triangle {
    //stroke: #000;
    stroke: #f96262;
    stroke-dasharray: 240;
    stroke-dashoffset: 480;
    transform: translateY( 0 );
    transition: all 0.7s ease-in-out;
   }

.playBut:hover .triangle,
.playBut:active .triangle {
    stroke: #865050;
    stroke-dashoffset: 0;
    opacity: 1;
    animation: nudge 0.7s ;
 }

  .playBut {
      display: inline-block;
      /* transition: all 0.5s ease; */
      vertical-align:middle;
      outline:1px dotted purple;
}

.one {
    display:inline;
    color:#6d6d6d; 
    font-weight:400;
    vertical-align:middle;
    font-family:Open sans;
    opacity: 0.5;
    outline:1px solid green;
}

@keyframes nudge {
   0% {
        transform: translateX( 0 )
      }
  30% {
        transform: translateX( -5px )
      }
  50% {
        transform: translateX( 5px )
      }
  70% {
        transform: translateX( -2px )
      }
 100% {
        transform: translateX( 0 )
      }
   }
</style>
</head>
<body>
<a href="#" class="playBut"><svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
x="0" y="0" width="45" height="45" 
viewBox="0 0 190 190">
<polygon 
class="triangle" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" 
points="73.5,62.5 148.5,105.8 73.5,149.1"/>
</svg><span class="one">TEXT</span></a>
</body>
</html>

any additional help with with lining up the triangle with the text horizontally (side-by-side) will be appreciated.

If my example works in isolation but not when incorporated into your code, then there is something within your code that I am unaware of.

Please post more of your code that affects this item including the contents of the head portion of your page that calls essential resources, css, etc.

Sorry for my delay. Sometimes I’m not the most observant turnip in the patch.

This is where an understanding of the very basics of HTML and CSS would be remarkably helpful - read: essential. Yes, you tried to apply my code elsewhere, BUT you changed the HTML so the CSS no longer targets the HTML where it is needed.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>vertically center text and svg</title>
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
.parent-container {  /* ADDED. Previously classed "text-center".  Needed to center align inline and inline-block child elements.  The effect is the same as assigning "text-align:center" to a paragraph to center align the words/sentences in the paragraph. */
    text-align:center;
    outline:1px dashed blue;
}
svg {
    vertical-align:middle;
    outline:1px dotted purple;  /* Outline for TESTING purposes */
}
.triangle {
/* JS comment marks must not be used within CSS. They invalidate at least the next line of the CSS, perhaps more.
    //stroke: #000;  
*/
    stroke: #f96262;
    stroke-dasharray: 240;
    stroke-dashoffset: 480;
    transform: translateY( 0 );
    transition: all 0.7s ease-in-out;
}
.playBut {
    display:inline-block;
    /* transition: all 0.5s ease; */
    text-decoration:none;  /* removes default anchor underline */
    outline:1px dashed red;  /* Outline for TESTING purposes */
}
.playBut:hover .triangle,
.playBut:active .triangle {
    stroke: #865050;
    stroke-dashoffset: 0;
    opacity: 1;
    animation: nudge 0.7s;
}
.one {
    display:inline-block;
    vertical-align:middle;
    color:#6d6d6d; 
    font-size:1.5em;  /* added, optional */
    font-weight:400;
    font-family:"open sans","sans-serif";  /* "open sans" is not a "universal" font family. A URL to this font family is needed or a fall-back should be included such as "sans-serif" */
    opacity:0.5;
    outline:1px dotted green;  /* Outline for TESTING purposes */
}

@keyframes nudge {
   0% {
        transform: translateX( 0 )
      }
  30% {
        transform: translateX( -5px )
      }
  50% {
        transform: translateX( 5px )
      }
  70% {
        transform: translateX( -2px )
      }
 100% {
        transform: translateX( 0 )
      }
}
    </style>
</head>
<body>

<div class="parent-container">  <!-- Parent container ADDED to your code so inline and inline-block children can be centered. -->
    <a href="#" class="playBut">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="45" height="45" viewBox="0 0 210 210">
            <polygon class="triangle" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="73.5,62.5 148.5,105.8 73.5,149.1"/>
        </svg>
        <span class="one">TEXT</span>  <!-- span WAS outside of the anchor in previous example.  You have moved it inside the anchor.  Necessitates several CSS changes. -->
    </a>
</div>

</body>
</html>

Applying “text-align:center” to a parent container is not the only way to center inline and inline-block elements, but it is the most fundametal and probably the easiest.

Thanks again for your assistance. Much appreciated.

Another question; how can I put the play button as a link:

<a href="#" class="playBut">

I tried to put the play button <a href within another <a href without success.

I look forward to any comments

I’m unclear what you’re trying to achieve, but that is already a link. Surely you just need to replace the # with the correct URL?

How would you expect that to work? You are nesting one link with destination inside another. How can a button link to two different resources at the same time?

I suggest you get into the habit of using the W3C Validator regularly, to pick up such errors.

1 Like

I’m confused by your question, ChrisjChrisj.

<a class="playBut" href="#"> is already an anchor. In the last code example that I wrote, the svg and the text are both between the open and close anchor tags so they will both be clickable. What is the problem?

Since you did not respond specifically about that last code example (good or bad - hit or miss- works or doesn’t and how), I don’t mind hounding you for an explanation of your rather odd question.

Feedback keeps the train rolling.