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?
my problem is center elements with Tailwind Grid.
GroupTooltipIcon1/GroupTooltipIcon2 are component that contain an svg.
I have to be able to center the svg component within this grid tailwind, can you help me?
<div className="mt-[75px] grid grid-cols-2 gap-2 justify-items-center">
<div>
<div className="iconInsideTooltip">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
const GroupTooltipIcon1 = ({
width = "48",
height = "48",
classes = "stroke-white",
}) => {
return (
<svg
className={classes}
style={{ width, height }}
viewBox={`0 0 48 48`}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_206_1350)">
<path d="M31.6027 22.5623L34.1509 20.0644C38.9389 22.0715 42.8398 19.6492 42.8398 19.6492C48.6345 14.1502 46.9798 6.58116 46.9798 6.58116L40.1784 13.3197C40.1784 13.3197 37.9889 13.3197 36.2775 11.8977C34.8555 10.1801 34.8555 7.99681 34.8555 7.99681L41.6003 1.20169C41.6003 1.20169 34.0313 -0.453049 28.5323 5.34168C28.5323 5.34168 26.11 9.24259 28.117 14.0306L23.373 18.869"
stroke="white"
strokeLinecap="round"
strokeLinejoin="round"/>
</g>
<defs>
<clipPath id="clip0_206_1350">
<rect width="48" height="48" fill="white"/>
</clipPath>
</defs>
</svg>
);
};
export default React.memo(GroupTooltipIcon1);
I have to be able to center the svg component within this grid tailwind, can you help me?
Thank you for help
I found a solution by doing it this way. I hope it will be useful to someone
<div className="mt-[75px] grid grid-cols-2 gap-2 items-start">
<div>
<div className="iconInsideTooltip flex justify-center">
<GroupTooltipIcon1 width="48px" height="48px" />
</div>
<TextSection
customClasses={{ "text-center p-5": "p5" }}
p5={
<>
<div>
Testo 1
</div>
</>
}
/>
</div>
</div>
I'm using FontAwesome's react-fontawesome like so:
<FontAwesomeIcon icon={faCaretUp} color="gray" size="lg" />
but the resulting icon has way too much space around it.
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-up" class="svg-inline--fa fa-caret-up fa-w-10 fa-lg " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" color="gray" style="margin: 0px auto;">
<path fill="currentColor" d="M288.662 352H31.338c-17.818 0-26.741-21.543-
14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662
128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path>
</svg>
Been trying to fix it for a while but nothing works, am I doing something wrong?
I have a menu in css whose icons are svg. When you mouse over the button, change the color of the icon via a CSS transition. Interestingly, not all the buttons work. It depends on the content of the href. Why?
This works:
<li class="navButton">
<a id="home" href="home.php">
<span class="icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="30px" height="30px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512"
xml:space="preserve">
<path class="icon_path" fill="white"
d="M256,69.972L50,275.815h42.507v166.213h326.985V275.815H462L256,69.972z
M374.492,397.028h-73.767v-86.495 h-89.451v86.495h-73.768V251.99
L256,133.587l118.492,118.402V397.028z"/>
</svg>
</span>
<span class="text">Home</span>
</a>
</li>
This doesn't work:
<li class="navButton">
<a id="projects" href="projects.php">
<span class="icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="30px" height="30px"
viewBox="0 0 512 512" enable-background="new 0 0 512 512"
xml:space="preserve">
<path class="icon_path" fill="white"
d="M436.631,207.445v163.681L279.232,462V298.319L436.631,207.445z
M256,258.08l180.201-104.04L256,50 L75.799,154.041L256,258.08z
M232.768,298.319L75.369,207.445v163.681L232.768,462V298.319z"/>
</svg>
</span>
<span class="text">Projects</span>
</a>
</li>
If I change the href content, eg projects2.php works. Too crazy..
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>