Does anyone have an answer to this?
Should I be using <symbol> here instead of <g> ?
Also, I couldn’t get the code to work using symbol, maybe I’m doing something wrong.
My attempt:
All the SVG’s are cut off for some reason.
<svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<symbol id="play">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</symbol>
</svg>
The <symbol> <use> element.
The use of symbol elements for graphics that are used multiple times in the same document adds structure and semantics.
Code:
https://jsfiddle.net/fmntda2s/
<div class="outer">
<div class="tcell">
<div class="container-left">
<div class=" wraph">
<ul class="nav">
<li>
<svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<g id="play">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</g>
</svg>
<svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
</div>
</li>
<li>
<svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
</li>
</ul>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
</div>
</div>
</div>
<symbol> elementhttps://www.sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/
The <symbol> element is similar to the group element <g> —it provides a way to group elements together. However, it differs from the group element in two main things:
The <symbol> element is not rendered. It is actually similar to <defs> in this manner. It is only displayed when it is use d.
A <symbol> element can have its own viewBox and preserveAspectRatio attributes. This allows it to fit into the viewport it is rendered into any way you want it to, instead of fitting in the default way.
<symbol> is then mostly suitable for defining reusable elements (or symbols ). It also serves as a template that is instantiated using the <use> element. And having viewBox and preserveAspectRatio attributes, it can scale-to-fit within a rectangular viewport defined by the referencing <use> element. Note that symbol elements define new viewports whenever they are instanced by a use element.
1 Like
PaulOB
August 2, 2020, 11:07am
2
I know nothing about svg at all but from just reading the link you provided it looks like the viewbox and size should be on the symbol element and not the following svgs.
i.e.
<div class="outer">
<div class="tcell">
<div class="container-left">
<div class=" wraph">
<ul class="nav">
<li>
<svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</symbol>
</svg>
<svg class="alpha" >
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
</div>
</li>
<li>
<svg class="iota">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
</li>
</ul>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
</div>
</div>
</div>
That works for me and would seem better than using the g element as mentioned in the link you provided.
3 Likes
It’s not even, look.
How is that fixed?
There’s clickable whitespace underneath every SVG
Meaning, when that area is clicked, nothing happens, no video opens.
The whole area inside the box should be clickable.
Also, how come there are 2 different mouse cursors when you hover over that area?
What’s not written properly in the html if that’s where the issue is?
<svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</symbol>
</svg>
<svg class="alpha" >
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
</div>
</li>
<li>
<svg class="iota">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
PaulOB
August 2, 2020, 7:44pm
4
I think you just need to add the width and height to the svg.
.container-left .wraph .nav li svg{width:198px;height:198px;}
1 Like
Who’s way is better?
or should I go back to using the <g> element?
@PaulOB
.container-left .wraph .nav li svg {
width: 198px;
height: 198px;
}
@coothead
<svg >
<symbol id="play">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</symbol>
</svg>
<svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
3rd Option.
Going back to using the the <g> element.https://jsfiddle.net/fmntda2s/
<svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<g id="play">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</g>
</svg>
<svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
PaulOB
August 2, 2020, 7:57pm
7
The symbol element means you don’t have to repeat the viewbox or size on every use element. That makes it neater in my mind but then I only read about this a few minutes ago.
<div class="outer">
<div class="tcell">
<div class="container-left">
<div class=" wraph">
<ul class="nav">
<li>
<svg class="alpha">
<symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</symbol>
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
</div>
</li>
<li>
<svg class="iota">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
</li>
</ul>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
</div>
</div>
</div>
However @coothead is more proficient with svg than me so I may be wide of the mark or missed a nuance somewhere.
1 Like
Hi there asasass,
you must bear in mind that we have workedthe code that you provided , whichsvg elements to create
The simple answer to your question is to code
coothead
1 Like
The way you would do it would be using a picture/image, right?
Wrong, I would use one svg element instead of ten.
1 Like
How, would you please show me?
I didn’t know that could be done.
Is that even possible, using only one <svg/> element instead of ten.
Hi there asasass,
Basic Example:-
https://codepen.io/coothead/full/qBZWEeM
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>One SVG element</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
svg{
display: block;
max-width: 44em;
margin: 1em auto;
}
</style>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 620 620">
<!-- Frame -->
<rect x="5" y="5" width="600" height="600" stroke-width="5" rx="25" stroke="#0059dd" fill="#2a277a"/>
<!-- Vertical lines -->
<line x1="205" y1="5" x2="205" y2="605" stroke-width="5" stroke="#0059dd"/>
<line x1="405" y1="5" x2="405" y2="605" stroke-width="5" stroke="#0059dd"/>
<!-- Horizontal lines -->
<line x1="5" y1="205" x2="605" y2="205" stroke-width="5" stroke="#0059dd"/>
<line x1="5" y1="405" x2="605" y2="405" stroke-width="5" stroke="#0059dd"/>
<!-- Pattern -->
<symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" fill="#00f"/>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75
6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9
21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" fill="#00f"/>
</symbol>
<!-- Top row-->
<use href="#play" x="5" y="5"/>
<use href="#play" x="205" y="5"/>
<use href="#play" x="405" y="5"/>
<!-- middle row-->
<use href="#play" x="5" y="205"/>
<use href="#play" x="205" y="205"/>
<use href="#play" x="405" y="205"/>
<!-- Bottom row-->
<use href="#play" x="5" y="405"/>
<use href="#play" x="205" y="405"/>
<use href="#play" x="405" y="405"/>
</svg>
</body>
</html> coothead
1 Like
Where would these go then?
<class="alpha"
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
<class="beta"
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
<class="beta"
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
<class="gamma"
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
<class="delta">
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
<class="epsilon">
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
<class="zeta>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
<class="eta">
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
<class="theta">
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
<class="iota">
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
That is not my problem.
You have it working here…https://jsfiddle.net/fmntda2s/
coothead
3 Likes
It’s working all these places too.
Which of those would be best to use?
1) Uses <g> element
<ul class="nav">
<li>
<svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<g id="play">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</g>
</svg>
<svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
</div>
</li>
<li>
<svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
</li>
</ul>
2) Uses <symbol>
.container-left .wraph .nav li svg {
width: 198px;
height: 198px;
}
<ul class="nav">
<li>
<svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</symbol>
</svg>
<svg class="alpha" >
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
</div>
</li>
<li>
<svg class="iota">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
</li>
</ul>
3) Uses <symbol> No extra CSS code.https://jsfiddle.net/uLv3cj60/
<ul class="nav">
<li>
<svg >
<symbol id="play">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</symbol>
</svg>
<svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
</div>
</li>
<li>
<svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<use href="#play" width="198" height="198" viewbox="8.5 -12.2 7 48.49"/>
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
</li>
</ul>
4) Uses <symbol> One less <svg>https://jsfiddle.net/def42tbx/
.container-left .wraph .nav li svg {
width: 198px;
height: 198px;
}
<ul class="nav">
<li>
<svg class="alpha">
<symbol id="play" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</symbol>
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingh" data-id="9Gn8ymkrlbI"></div>
</div>
</li>
<li>
<svg class="iota">
<use href="#play" />
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
</li>
</ul>
Hi there asasass,
personally, I would not use any of them.
If I was going to make a gallery of videos then…
I would not use SVG at all.
The videos would have to be available and
The page would have to be responsive.
Only then would I consider using JavaScript
coothead
2 Likes
system
November 2, 2020, 6:41am
17
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
