quinn-p-mchugh
commented
1 month ago +1
I'd like to display a horizontal Mermaid Gantt chart (SVG) on a Docusaurus site, but it's length makes it difficult to view. Providing users the ability to zoom into SVGs would solve this problem.
Source code:
<svg aria-roledescription="gantt" role="graphics-document document" style="max-width: 2257px;" viewBox="0 0 2257 292" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-svg-8430471"><style>#mermaid-svg-8430471{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8430471 .error-icon{fill:#552222;}#mermaid-svg-8430471 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8430471 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-8430471 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8430471 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8430471 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8430471 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8430471 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8430471 .marker.cross{stroke:#333333;}#mermaid-svg-8430471 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8430471 .mermaid-main-font{font-family:var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);}#mermaid-svg-8430471 .exclude-range{fill:#eeeeee;}#mermaid-svg-8430471 .section{stroke:none;opacity:0.2;}#mermaid-svg-8430471 .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-8430471 .section2{fill:#fff400;}#mermaid-svg-8430471 .section1,#mermaid-svg-8430471 .section3{fill:white;opacity:0.2;}#mermaid-svg-8430471 .sectionTitle0{fill:#333;}#mermaid-svg-8430471 .sectionTitle1{fill:#333;}#mermaid-svg-8430471 .sectionTitle2{fill:#333;}#mermaid-svg-8430471 .sectionTitle3{fill:#333;}#mermaid-svg-8430471 .sectionTitle{text-anchor:start;font-family:var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);}#mermaid-svg-8430471 .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-8430471 .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-8430471 .grid path{stroke-width:0;}#mermaid-svg-8430471 .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-8430471 .task{stroke-width:2;}#mermaid-svg-8430471 .taskText{text-anchor:middle;font-family:var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);}#mermaid-svg-8430471 .taskTextOutsideRight{fill:black;text-anchor:start;font-family:var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);}#mermaid-svg-8430471 .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-8430471 .task.clickable{cursor:pointer;}#mermaid-svg-8430471 .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-8430471 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-8430471 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-8430471 .taskText0,#mermaid-svg-8430471 .taskText1,#mermaid-svg-8430471 .taskText2,#mermaid-svg-8430471 .taskText3{fill:white;}#mermaid-svg-8430471 .task0,#mermaid-svg-8430471 .task1,#mermaid-svg-8430471 .task2,#mermaid-svg-8430471 .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-8430471 .taskTextOutside0,#mermaid-svg-8430471 .taskTextOutside2{fill:black;}#mermaid-svg-8430471 .taskTextOutside1,#mermaid-svg-8430471 .taskTextOutside3{fill:black;}#mermaid-svg-8430471 .active0,#mermaid-svg-8430471 .active1,#mermaid-svg-8430471 .active2,#mermaid-svg-8430471 .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-8430471 .activeText0,#mermaid-svg-8430471 .activeText1,#mermaid-svg-8430471 .activeText2,#mermaid-svg-8430471 .activeText3{fill:black!important;}#mermaid-svg-8430471 .done0,#mermaid-svg-8430471 .done1,#mermaid-svg-8430471 .done2,#mermaid-svg-8430471 .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-8430471 .doneText0,#mermaid-svg-8430471 .doneText1,#mermaid-svg-8430471 .doneText2,#mermaid-svg-8430471 .doneText3{fill:black!important;}#mermaid-svg-8430471 .crit0,#mermaid-svg-8430471 .crit1,#mermaid-svg-8430471 .crit2,#mermaid-svg-8430471 .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-8430471 .activeCrit0,#mermaid-svg-8430471 .activeCrit1,#mermaid-svg-8430471 .activeCrit2,#mermaid-svg-8430471 .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-8430471 .doneCrit0,#mermaid-svg-8430471 .doneCrit1,#mermaid-svg-8430471 .doneCrit2,#mermaid-svg-8430471 .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-8430471 .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-8430471 .milestoneText{font-style:italic;}#mermaid-svg-8430471 .doneCritText0,#mermaid-svg-8430471 .doneCritText1,#mermaid-svg-8430471 .doneCritText2,#mermaid-svg-8430471 .doneCritText3{fill:black!important;}#mermaid-svg-8430471 .activeCritText0,#mermaid-svg-8430471 .activeCritText1,#mermaid-svg-8430471 .activeCritText2,#mermaid-svg-8430471 .activeCritText3{fill:black!important;}#mermaid-svg-8430471 .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:var(--mermaid-font-family, "trebuchet ms", verdana, arial, sans-serif);}#mermaid-svg-8430471 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g></g><g text-anchor="middle" font-family="sans-serif" font-size="10" fill="none" transform="translate(75, 242)" class="grid"><path d="M0,-207V0H2107V-207" stroke="currentColor" class="domain"></path><g transform="translate(0,0)" opacity="1" class="tick"><line y2="-207" stroke="currentColor"></line><text style="text-anchor: middle;" font-size="10" stroke="none" dy="1em" y="3" fill="#000">2017-01-01</text></g><g transform="translate(301,0)" opacity="1" class="tick"><line y2="-207" stroke="currentColor"></line><text style="text-anchor: middle;" font-size="10" stroke="none" dy="1em" y="3" fill="#000">2018-01-01</text></g><g transform="translate(602,0)" opacity="1" class="tick"><line y2="-207" stroke="currentColor"></line><text style="text-anchor: middle;" font-size="10" stroke="none" dy="1em" y="3" fill="#000">2019-01-01</text></g><g transform="translate(903,0)" opacity="1" class="tick"><line y2="-207" stroke="currentColor"></line><text style="text-anchor: middle;" font-size="10" stroke="none" dy="1em" y="3" fill="#000">2020-01-01</text></g><g transform="translate(1204,0)" opacity="1" class="tick"><line y2="-207" stroke="currentColor"></line><text style="text-anchor: middle;" font-size="10" stroke="none" dy="1em" y="3" fill="#000">2021-01-01</text></g><g transform="translate(1505,0)" opacity="1" class="tick"><line y2="-207" stroke="currentColor"></line><text style="text-anchor: middle;" font-size="10" stroke="none" dy="1em" y="3" fill="#000">2022-01-01</text></g><g transform="translate(1806,0)" opacity="1" class="tick"><line y2="-207" stroke="currentColor"></line><text style="text-anchor: middle;" font-size="10" stroke="none" dy="1em" y="3" fill="#000">2023-01-01</text></g><g transform="translate(2107,0)" opacity="1" class="tick"><line y2="-207" stroke="currentColor"></line><text style="text-anchor: middle;" font-size="10" stroke="none" dy="1em" y="3" fill="#000">2024-01-01</text></g></g><g><rect class="section section0" height="24" width="2219.5" y="48" x="0"></rect><rect class="section section0" height="24" width="2219.5" y="72" x="0"></rect><rect class="section section0" height="24" width="2219.5" y="96" x="0"></rect><rect class="section section0" height="24" width="2219.5" y="120" x="0"></rect><rect class="section section0" height="24" width="2219.5" y="144" x="0"></rect><rect class="section section0" height="24" width="2219.5" y="168" x="0"></rect><rect class="section section0" height="24" width="2219.5" y="192" x="0"></rect><rect class="section section0" height="24" width="2219.5" y="216" x="0"></rect></g><g><rect class="task active0" transform-origin="75px 60px" height="20" width="0" y="50" x="75" ry="3" rx="3" id="task1"></rect><rect class="task active0" transform-origin="376px 84px" height="20" width="0" y="74" x="376" ry="3" rx="3" id="task2"></rect><rect class="task active0" transform-origin="677px 108px" height="20" width="0" y="98" x="677" ry="3" rx="3" id="task3"></rect><rect class="task active0" transform-origin="978px 132px" height="20" width="0" y="122" x="978" ry="3" rx="3" id="task4"></rect><rect class="task active0" transform-origin="1279px 156px" height="20" width="0" y="146" x="1279" ry="3" rx="3" id="task5"></rect><rect class="task active0" transform-origin="1580px 180px" height="20" width="0" y="170" x="1580" ry="3" rx="3" id="task6"></rect><rect class="task active0" transform-origin="1881px 204px" height="20" width="0" y="194" x="1881" ry="3" rx="3" id="task7"></rect><rect class="task active0" transform-origin="2182px 228px" height="20" width="0" y="218" x="2182" ry="3" rx="3" id="task8"></rect><text class="taskTextOutsideRight taskTextOutside0 activeText0 width-23.52312660217285" y="63.5" x="80" font-size="11" id="task1-text">2017</text><text class="taskTextOutsideRight taskTextOutside0 activeText0 width-23.52312660217285" y="87.5" x="381" font-size="11" id="task2-text">2018</text><text class="taskTextOutsideRight taskTextOutside0 activeText0 width-23.52312660217285" y="111.5" x="682" font-size="11" id="task3-text">2019</text><text class="taskTextOutsideRight taskTextOutside0 activeText0 width-23.5230712890625" y="135.5" x="983" font-size="11" id="task4-text">2020</text><text class="taskTextOutsideRight taskTextOutside0 activeText0 width-23.071640014648438" y="159.5" x="1284" font-size="11" id="task5-text">2021</text><text class="taskTextOutsideRight taskTextOutside0 activeText0 width-23.071640014648438" y="183.5" x="1585" font-size="11" id="task6-text">2022</text><text class="taskTextOutsideRight taskTextOutside0 activeText0 width-23.071640014648438" y="207.5" x="1886" font-size="11" id="task7-text">2023</text><text class="taskTextOutsideRight taskTextOutside0 activeText0 width-23.5230712890625" y="231.5" x="2187" font-size="11" id="task8-text">2024</text></g><g><text class="sectionTitle sectionTitle0" font-size="11" y="146" x="10" dy="0em"><tspan x="10" alignment-baseline="central">Activity</tspan></text></g><g class="today"><line class="today" y2="267" y1="25" x2="2427" x1="2427"></line></g><text class="titleText" y="25" x="1128.5">Website Milestones</text></svg>Thanks for the consideration!
Is your feature request related to a problem? Please describe. We have a documentation website which uses docusaurus-plugin-zooming, and we have started pushing more mermaid diagrams to it. Some of these diagrams are quite detailed; it will be awesome if the viewer can zoom in on them. In HTML, these diagrams are SVG objects and it looks like we cannot use coming with SVG now.
Describe the solution you'd like Zooming to support svg(s) in the same way as other images.
Describe alternatives you've considered Recommendation for an alternative solution to my problem.