Mermaid class diagram hide/conceal certain nodes and links/edgePaths - css
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?
Related
How to fix unknown lines being created by svg transformation
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.
Make SVG loaded from file overflow:visible outside <object>
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 extra space at the end
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>
Whats the best way to vertically align SVG with buttons?
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>
Adding border to SVG image
Is it possible to wrap a SVG image inside a border (that is - putting a border from CSS around that image) .
Draw a <rect> round the image which is fill="none". You can use the stroke of the <rect> as the border.
Here are some examples, tested in Firefox: <svg width="100" height="100" style="border:1px solid black"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> <br><br> <svg width="300" height="100" style="border:1px solid black"> <rect width="300" height="100" style="fill:rgb(110, 50, 25); stroke-width:4; stroke:rgb(43, 222, 221);" /> </svg> <br><br> <svg width="170" height="170" style="border:1px solid black"> <rect x="10" y="10" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9;" /> </svg> Hope it helps. :)
If you want to add a border to some random geometric SVG shapes from CSS it's possible to do it with outline CSS property.
ellipse {
outline: 1px solid red;
outline-offset: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<meta
http-equiv="X-UA-Compatible"
content="ie=edge"
>
<title>Demo</title>
</head>
<body>
<svg width="224" height="112" viewBox="0 0 224 115" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="112.5" cy="84" rx="28.5" ry="28" fill="#D9D9D9"/>
<path d="M26.5 0L52.9138 45H0.0862255L26.5 0Z" fill="#D9D9D9"/>
<path d="M196.5 0L202.899 19.3475H223.605L206.853 31.305L213.252 50.6525L196.5 38.695L179.748 50.6525L186.147 31.305L169.395 19.3475H190.101L196.5 0Z" fill="#D9D9D9"/>
</svg>
</body>
</html>