I see this html/css code here:
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.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.