I have a loading svg icon consisting of 3 circles that rotates clockwise. It works fine and designs are correct on chrome and firefox but, on safari, circles create a weird line at a certain point (SS below). Not sure what could be causing this issue.
The code for loader svg
<div class="flex flex-row justify-center items-center w-full h-full fixed select-none z-50" style="left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);background: rgba(255,255,255,0.7);" x-show="isLoading" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg" stroke="#fff" class="stroke-current text-primary" style="/* stroke: salmon; */">
<g fill="none" fill-rule="evenodd" style="fill: color();">
<g transform="translate(1 1)" stroke-width="2" style="translate: (0,1);transform: translate();transform: translate(112341122121,5);">
<circle cx="5" cy="50" r="5">
<animate attributeName="cy" begin="0s" dur="2.2s" values="50;5;50;50" calcMode="linear" repeatCount="indefinite"></animate>
<animate attributeName="cx" begin="0s" dur="2.2s" values="5;27;49;5" calcMode="linear" repeatCount="indefinite"></animate>
</circle>
<circle cx="27" cy="5" r="5">
<animate attributeName="cy" begin="0s" dur="2.2s" from="5" to="5" values="5;50;50;5" calcMode="linear" repeatCount="indefinite"></animate>
<animate attributeName="cx" begin="0s" dur="2.2s" from="27" to="27" values="27;49;5;27" calcMode="linear" repeatCount="indefinite"></animate>
</circle>
<circle cx="49" cy="50" r="5">
<animate attributeName="cy" begin="0s" dur="2.2s" values="50;50;5;50" calcMode="linear" repeatCount="indefinite"></animate>
<animate attributeName="cx" from="49" to="49" begin="0s" dur="2.2s" values="49;5;27;49" calcMode="linear" repeatCount="indefinite"></animate>
</circle>
</g>
</g>
</svg>
<div class="ml-10 text-primary text-xl">
Loading... </div>
</div>
How can I solve it? Cannot figure it out.
Related
I want to create a mermaid class diagram in a github .md file where in I can hide/conceal certain nodes and paths/links from that node using CSS.
What I want?
I want the following where the node for the Zebra is concealed and the arrow path/link from it is also concealed. But the sibling Lion class and it's link is 100% opacity.
What I have tried:
I was able to hide nodes using the cssClass feature as below:
// CSS
<style>
.conceal {
opacity: 20% !important;
}
</style>
// ```mermaid
classDiagram
Animal <|--|> Zebra
Animal <|--|> Lion
cssClass "Zebra" conceal
// ```
This produces the following chart where Zebra is concealed while lion is not
However the path from the Zebra is still 100% opacity.
To fix the opacity of the edgePath I tried the following:
.edgePaths:has(~g>g.conceal) {
opacity: 20% !important;
}
// CSS
<style>
.conceal {
opacity: 20% !important;
}
.edgePaths:has(~g>g.conceal) {
opacity: 20% !important;
}
</style>
//```mermaid
classDiagram
Animal <|--|> Zebra
Animal <|--|> Lion
cssClass "Zebra" conceal
//```
Note: the has css selector does not work in Firefox yet.
However, this made both paths from Animal have the lowered opacity as can be seen (in Chrome):
Here is the SVG as example:
<svg aria-labelledby="chart-title-mermaid-1671893404869 chart-desc-mermaid-1671893404869" role="img" viewBox="0.000003814697265625 0.00000286102294921875 170.4431915283203 195.19317626953125" style="max-width: 170.4431915283203px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1671893404869">
<style>
.conceal {
opacity: 20% !important;
}
.edgePaths:has(~g>g.conceal) {
opacity: 20% !important;
}
</style>
<title id="chart-title-mermaid-1671893404869">
</title>
<desc id="chart-desc-mermaid-1671893404869">
</desc>
<style>
#mermaid-1671893404869 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-1671893404869 .error-icon{fill:#552222;}#mermaid-1671893404869 .error-text{fill:#552222;stroke:#552222;}#mermaid-1671893404869 .edge-thickness-normal{stroke-width:2px;}#mermaid-1671893404869 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1671893404869 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1671893404869 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1671893404869 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1671893404869 .marker{fill:#333333;stroke:#333333;}#mermaid-1671893404869 .marker.cross{stroke:#333333;}#mermaid-1671893404869 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1671893404869 g.classGroup text{fill:#9370DB;fill:#131300;stroke:none;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:10px;}#mermaid-1671893404869 g.classGroup text .title{font-weight:bolder;}#mermaid-1671893404869 .nodeLabel,#mermaid-1671893404869 .edgeLabel{color:#131300;}#mermaid-1671893404869 .edgeLabel .label rect{fill:#ECECFF;}#mermaid-1671893404869 .label text{fill:#131300;}#mermaid-1671893404869 .edgeLabel .label span{background:#ECECFF;}#mermaid-1671893404869 .classTitle{font-weight:bolder;}#mermaid-1671893404869 .node rect,#mermaid-1671893404869 .node circle,#mermaid-1671893404869 .node ellipse,#mermaid-1671893404869 .node polygon,#mermaid-1671893404869 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1671893404869 .divider{stroke:#9370DB;stroke:1;}#mermaid-1671893404869 g.clickable{cursor:pointer;}#mermaid-1671893404869 g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-1671893404869 g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-1671893404869 .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-1671893404869 .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-1671893404869 .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-1671893404869 .dashed-line{stroke-dasharray:3;}#mermaid-1671893404869 #compositionStart,#mermaid-1671893404869 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #compositionEnd,#mermaid-1671893404869 .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #dependencyStart,#mermaid-1671893404869 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #dependencyStart,#mermaid-1671893404869 .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #extensionStart,#mermaid-1671893404869 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #extensionEnd,#mermaid-1671893404869 .extension{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #aggregationStart,#mermaid-1671893404869 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #aggregationEnd,#mermaid-1671893404869 .aggregation{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #lollipopStart,#mermaid-1671893404869 .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 #lollipopEnd,#mermaid-1671893404869 .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-1671893404869 .edgeTerminals{font-size:11px;}#mermaid-1671893404869 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
</style>
<g>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker aggregation classDiagram" id="classDiagram-aggregationStart">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker aggregation classDiagram" id="classDiagram-aggregationEnd">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker extension classDiagram" id="classDiagram-extensionStart">
<path d="M 1,7 L18,13 V 1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker extension classDiagram" id="classDiagram-extensionEnd">
<path d="M 1,1 V 13 L18,7 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker composition classDiagram" id="classDiagram-compositionStart">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker composition classDiagram" id="classDiagram-compositionEnd">
<path d="M 18,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker dependency classDiagram" id="classDiagram-dependencyStart">
<path d="M 5,7 L9,13 L1,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="28" markerWidth="20" refY="7" refX="19" class="marker dependency classDiagram" id="classDiagram-dependencyEnd">
<path d="M 18,7 L9,13 L14,7 L9,1 Z">
</path>
</marker>
</defs>
<defs>
<marker orient="auto" markerHeight="240" markerWidth="190" refY="7" refX="0" class="marker lollipop classDiagram" id="classDiagram-lollipopStart">
<circle r="6" cy="7" cx="6" fill="white" stroke="black">
</circle>
</marker>
</defs>
<g class="root">
<g class="clusters">
</g>
<g class="edgePaths">
<path marker-end="url(#classDiagram-extensionEnd)" marker-start="url(#classDiagram-extensionStart)" style="fill:none" class="edge-pattern-solid relation" id="id1" d="M58.962245118973726,72.59658813476562L55.24552626440763,76.7632548014323C51.528807409841534,80.92992146809895,44.09536970070934,89.2632548014323,40.378650846143245,97.59658813476562C36.66193199157715,105.92992146809895,36.66193199157715,114.2632548014323,36.66193199157715,118.42992146809895L36.66193199157715,122.59658813476562">
</path>
<path marker-end="url(#classDiagram-extensionEnd)" marker-start="url(#classDiagram-extensionStart)" style="fill:none" class="edge-pattern-solid relation" id="id2" d="M116.58321081364346,72.59658813476562L120.29992966820957,76.7632548014323C124.01664852277565,80.92992146809895,131.45008623190785,89.2632548014323,135.16680508647394,97.59658813476562C138.88352394104004,105.92992146809895,138.88352394104004,114.2632548014323,138.88352394104004,118.42992146809895L138.88352394104004,122.59658813476562">
</path>
</g>
<g class="edgeLabels">
<g class="edgeLabel">
<g transform="translate(0, 0)" class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
</span>
</div>
</foreignObject>
</g>
</g>
<g class="edgeLabel">
<g transform="translate(0, 0)" class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
</span>
</div>
</foreignObject>
</g>
</g>
</g>
<g class="nodes">
<g transform="translate(87.7727279663086, 40.29829406738281)" id="classid-Animal-0" class="node default">
<rect height="64.59659194946289" width="66.34659194946289" y="-32.298295974731445" x="-33.173295974731445" class="outer title-state">
</rect>
<line y2="5.298295974731445" y1="5.298295974731445" x2="33.173295974731445" x1="-33.173295974731445" class="divider">
</line>
<line y2="21.298295974731445" y1="21.298295974731445" x2="33.173295974731445" x1="-33.173295974731445" class="divider">
</line>
<g class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
</span>
</div>
</foreignObject>
<foreignObject transform="translate( -25.673295974731445, -24.798295974731445)" height="25.59659194946289" width="51.34659194946289" class="classTitle">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
Animal
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(36.66193199157715, 154.89488220214844)" id="classid-Zebra-1" class="node default conceal">
<rect height="64.59659194946289" width="57.3238639831543" y="-32.298295974731445" x="-28.66193199157715" class="outer title-state">
</rect>
<line y2="5.298295974731445" y1="5.298295974731445" x2="28.66193199157715" x1="-28.66193199157715" class="divider">
</line>
<line y2="21.298295974731445" y1="21.298295974731445" x2="28.66193199157715" x1="-28.66193199157715" class="divider">
</line>
<g class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
</span>
</div>
</foreignObject>
<foreignObject transform="translate( -21.16193199157715, -24.798295974731445)" height="25.59659194946289" width="42.3238639831543" class="classTitle">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
Zebra
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(138.88352394104004, 154.89488220214844)" id="classid-Lion-2" class="node default">
<rect height="64.59659194946289" width="47.119319915771484" y="-32.298295974731445" x="-23.559659957885742" class="outer title-state">
</rect>
<line y2="5.298295974731445" y1="5.298295974731445" x2="23.559659957885742" x1="-23.559659957885742" class="divider">
</line>
<line y2="21.298295974731445" y1="21.298295974731445" x2="23.559659957885742" x1="-23.559659957885742" class="divider">
</line>
<g class="label">
<foreignObject height="0" width="0">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
</span>
</div>
</foreignObject>
<foreignObject transform="translate( -16.059659957885742, -24.798295974731445)" height="25.59659194946289" width="32.119319915771484" class="classTitle">
<div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
Lion
</span>
</div>
</foreignObject>
</g>
</g>
</g>
</g>
</g>
</svg>
Question:
Is there a way using CSS selectors to apply the reduced opacity to only one of the edgePaths?
I need to remove the hover while the checkbox is checked.
Hovering I implemented at the expense of styling based on parent state (group).
Tried method style based on sibling state, but didn't work either
<div className="group">
<input className="peer hidden" id="check" type="checkbox" />
<label
className="
peer/label
group-hover:bg-[#F2F2F2]
group-hover:border-2
group-hover:border-solid
group-hover:border-[#F2F2F2]
flex
justify-center
items-center
peer-checked:bg-[#4DD599]
peer-checked:border-2
peer-checked:border-solid
peer-checked:border-[#4DD599]
w-5
h-5
rounded-full
border-2
border-solid
border-[#E8E8E8]
cursor-pointer
inline-block
"
htmlFor="check">
<svg
className="
group-hover:opacity-100
relative
left-[0.5px]
"
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
className="
group-hover:stroke-[#b2b2b2]
stroke-[#f2f2f2]
ease-in-out"
d="M9.29999 1.20001L3.79999 6.70001L1.29999 4.20001"
stroke="#000"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</label>
</div>
- not correct
Is there a simple way of having an SVG loaded from external file and overflowing?
I tried this:
<html>
<body>
<div style="width:100px;height:30px;">
<svg version="1.1"
baseProfile="full"
width="100%" height="100%"
viewBox="0 0 300 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
overflow="visible">
<rect width="100%" height="100%" fill="black" />
<circle cx="150" cy="100" r="120" fill="blue" />
</svg>
</div>
<div style="width:100px;height:30px;overflow:visible;">
<object style='width:100%;height:100%;overflow:visible;' type='image/svg+xml' data='simple.svg'></object>
</div>
</body>
</html>
where simple.svg is the same as the inline <svg> tag. As seen in this
image:
or in this https://jsfiddle.net/bhLk69wd/1/, the SVG is clipped by <object>. Previously, I tried <img> and <embed> and the SVG was also clipped.
Owl Carousel creates an empty space at the end of the carousel when i slide to the the last item. I am not sure whether it is default behaviour but it looks odd to me.
In this we can see the extra space I'm talking about at the end of the carousel. Here is the code I used so far :
I am using autowidth = true because i will be using the carousel code for different card types(different widths)...My issue occurs only when i slide to the last item..while sliding to the last item has an empty space
please add the items into the options,
items : 3 (The number of items you want to see on the screen.)
$('.owl-carousel').owlCarousel({
autoWidth:true,
loop:false,
items:3,
center:false,
dots: false,
merge:true,
margin:10,
lazyload:false,
nav:true,
navText: [
' <svg class="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a1{fill:#fff;stroke:#ec7f4a;stroke-width:4px;}.b1{stroke:#000;}.c1{stroke:none;}.d1{fill:none;}.e1{filter:url(#a1);}</style><filter id="a1" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-1527 -173)"><g class="e1" transform="matrix(1, 0, 0, 1, 1527, 173)"><g class="a1" transform="translate(9 6)"><circle class="c1" cx="22" cy="22" r="22"/><circle class="d1" cx="22" cy="22" r="20"/></g></g><path class="b1" d="M4,11H16.17L10.58,5.41,12,4l8,8-8,8-1.41-1.41L16.17,13H4Z" transform="translate(1570 213) rotate(180)"/></g></svg>',
' <svg class="hide-show animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a{fill:#fff;stroke:white;stroke-width:4px;}.b{stroke:#000;}.c{stroke:none;}.d{fill:none;}.e{filter:url(#a);}.animate .d,.a{animation: load-icon 1.5s linear .4s ;stroke-dasharray: 200;animation-direction: alternate-reverse;}#keyframes load-icon {to {stroke-dashoffset:200;stroke:#EC7F4A;}}</style><filter id="a" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-11 -173)"><g class="e" transform="matrix(1, 0, 0, 1, 11, 173)"><g class="a" transform="translate(9 6)"><circle class="c" cx="22" cy="22" r="22"/><circle class="d" cx="22" cy="22" r="20"/></g></g><path class="b" d="M20,11H7.83l5.59-5.59L12,4,4,12l8,8,1.41-1.41L7.83,13H20Z" transform="translate(54 213) rotate(-180)"/></g></svg> '
]
})
Thanks,
By adding the items you can control the display items. And also based on your screen width using responsive you control the display items.
Below example I have added like that. Hope this will work for you.
$('.owl-carousel').owlCarousel({
loop:false,
center:false,
dots: false,
items:4,
merge:true,
margin:10,
lazyload:false,
margin: 10,
nav:true,
navText: [
'<svg class="first" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a1{fill:#fff;stroke:#ec7f4a;stroke-width:4px;}.b1{stroke:#000;}.c1{stroke:none;}.d1{fill:none;}.e1{filter:url(#a1);}</style><filter id="a1" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-1527 -173)"><g class="e1" transform="matrix(1, 0, 0, 1, 1527, 173)"><g class="a1" transform="translate(9 6)"><circle class="c1" cx="22" cy="22" r="22"/><circle class="d1" cx="22" cy="22" r="20"/></g></g><path class="b1" d="M4,11H16.17L10.58,5.41,12,4l8,8-8,8-1.41-1.41L16.17,13H4Z" transform="translate(1570 213) rotate(180)"/></g></svg>',
'<svg class="hide-show animate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="62" height="62" viewBox="0 0 62 62"><defs><style>.a{fill:#fff;stroke:white;stroke-width:4px;}.b{stroke:#000;}.c{stroke:none;}.d{fill:none;}.e{filter:url(#a);}.animate .d,.a{animation: load-icon 1.5s linear .4s ;stroke-dasharray: 200;animation-direction: alternate-reverse;}#keyframes load-icon {to {stroke-dashoffset:200;stroke:#EC7F4A;}}</style><filter id="a" x="0" y="0" width="62" height="62" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g transform="translate(-11 -173)"><g class="e" transform="matrix(1, 0, 0, 1, 11, 173)"><g class="a" transform="translate(9 6)"><circle class="c" cx="22" cy="22" r="22"/><circle class="d" cx="22" cy="22" r="20"/></g></g><path class="b" d="M20,11H7.83l5.59-5.59L12,4,4,12l8,8,1.41-1.41L7.83,13H20Z" transform="translate(54 213) rotate(-180)"/></g></svg> '
],
autoplay: true,
autoplayHoverPause: true,
responsive: {
0: {
items: 2
},
767: {
items: 3
},
1024: {
items: 4
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
<div class="item"><img src="http://placehold.it/150x150"></div>
</div>
</div>
How would I vertically align these SVG images to vertically match the buttons I'm making?
<button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 1<br>
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns=
"http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path></svg> <button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step Two<br>
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns=
"http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path></svg> <button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 3<br>
.</button>
jsfiddle
UPDATED 7 May 2018
added display: flex option
You can style both button and svg like this:
button,
svg {
display: inline-block;
vertical-align: middle;
}
button,
svg {
display: inline-block;
vertical-align: middle;
}
<h2>Using display inline block and vertical align middle</h2>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 1<br>.
</button>
<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path>
</svg>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step Two<br>.
</button>
<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path>
</svg>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 3<br>.
</button>
Hope this helps.
Display Flex
You can also achieve this by using display: flex for browser that is supported. But need an extra wrapper for the buttons and the svg.
#supports (display: flex) {
.steps {
display: flex;
flex-direction: row;
align-items: center;
}
}
<h2>Using display flex</h2>
<div class="steps">
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 1<br>.
</button>
<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path>
</svg>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step Two<br>.
</button>
<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path>
</svg>
<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 3<br>.
</button>
</div>