search

svg-net / SVG

Fork of the ms svg library
http://svg-net.github.io/SVG/
Microsoft Public License
1.17k stars 475 forks source link

Add support to html in foreignObject #762

Open NinjaCross opened 4 years ago

NinjaCross commented 4 years ago

Description

The foreignObject tags are rendered as empty boxes when the content is an html fragment

Example data

The following sample has been generated using MermaidJs


<svg id="mermaid-1600326373315" width="313.25"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" height="456.2531433105469" viewBox="0 0 313.25 456.2531433105469">
    <style>#mermaid-1600326373315{font-family:"trebuchet ms",verdana,arial;font-size:16px;fill:#333;}#mermaid-1600326373315 .error-icon{fill:#552222;}#mermaid-1600326373315 .error-text{fill:#552222;stroke:#552222;}#mermaid-1600326373315 .edge-thickness-normal{stroke-width:2px;}#mermaid-1600326373315 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1600326373315 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1600326373315 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1600326373315 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1600326373315 .marker{fill:#333333;}#mermaid-1600326373315 .marker.cross{stroke:#333333;}#mermaid-1600326373315 svg{font-family:"trebuchet ms",verdana,arial;font-size:16px;}#mermaid-1600326373315 .label{font-family:"trebuchet ms",verdana,arial;color:#333;}#mermaid-1600326373315 .label text{fill:#333;}#mermaid-1600326373315 .node rect,#mermaid-1600326373315 .node circle,#mermaid-1600326373315 .node ellipse,#mermaid-1600326373315 .node polygon,#mermaid-1600326373315 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1600326373315 .node .label{text-align:center;}#mermaid-1600326373315 .node.clickable{cursor:pointer;}#mermaid-1600326373315 .arrowheadPath{fill:#333333;}#mermaid-1600326373315 .edgePath .path{stroke:#333333;stroke-width:1.5px;}#mermaid-1600326373315 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1600326373315 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-1600326373315 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-1600326373315 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1600326373315 .cluster text{fill:#333;}#mermaid-1600326373315 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial;font-size:12px;background:hsl(80,100%,96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1600326373315:root{--mermaid-font-family:"trebuchet ms",verdana,arial;}#mermaid-1600326373315 flowchart{fill:apa;}</style>
    <g>
        <g class="output">
            <g class="clusters"></g>
            <g class="edgePaths">
                <g class="edgePath LS-A LE-B" id="L-A-B" style="opacity: 1;">
                    <path class="path" d="M161.03125,47L161.03125,81.5L161.03125,116" marker-end="url(#arrowhead623)" style="fill:none"></path>
                    <defs>
                        <marker id="arrowhead623" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
                        </marker>
                    </defs>
                </g>
                <g class="edgePath LS-B LE-C" id="L-B-C" style="opacity: 1;">
                    <path class="path" d="M161.03125,155L161.03125,180L161.53125,205.50000152587884" marker-end="url(#arrowhead624)" style="fill:none"></path>
                    <defs>
                        <marker id="arrowhead624" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
                        </marker>
                    </defs>
                </g>
                <g class="edgePath LS-C LE-D" id="L-C-D" style="opacity: 1;">
                    <path class="path" d="M125.22298890445946,304.4448654303384L42.6328125,374.7531280517578L42.6328125,409.2531280517578" marker-end="url(#arrowhead625)" style="fill:none"></path>
                    <defs>
                        <marker id="arrowhead625" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
                        </marker>
                    </defs>
                </g>
                <g class="edgePath LS-C LE-E" id="L-C-E" style="opacity: 1;">
                    <path class="path" d="M161.53125000000003,340.7531234741211L161.03125,374.7531280517578L161.03125,409.2531280517578" marker-end="url(#arrowhead626)" style="fill:none"></path>
                    <defs>
                        <marker id="arrowhead626" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
                        </marker>
                    </defs>
                </g>
                <g class="edgePath LS-C LE-F" id="L-C-F" style="opacity: 1;">
                    <path class="path" d="M197.2009889290666,305.08338454505446L275.0234375,374.7531280517578L275.0234375,409.2531280517578" marker-end="url(#arrowhead627)" style="fill:none"></path>
                    <defs>
                        <marker id="arrowhead627" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto">
                            <path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path>
                        </marker>
                    </defs>
                </g>
            </g>
            <g class="edgeLabels">
                <g class="edgeLabel" transform="translate(161.03125,81.5)" style="opacity: 1;">
                    <g transform="translate(-38.96875,-9.5)" class="label">
                        <rect rx="0" ry="0" width="77.9375" height="19"></rect>
                        <foreignObject width="77.9375" height="19">
                            <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
                                <span id="L-L-A-B" class="edgeLabel L-LS-A' L-LE-B">Get money</span>
                            </div>
                        </foreignObject>
                    </g>
                </g>
                <g class="edgeLabel" transform="" style="opacity: 1;">
                    <g transform="translate(0,0)" class="label">
                        <rect rx="0" ry="0" width="0" height="0"></rect>
                        <foreignObject width="0" height="0">
                            <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
                                <span id="L-L-B-C" class="edgeLabel L-LS-B' L-LE-C"></span>
                            </div>
                        </foreignObject>
                    </g>
                </g>
                <g class="edgeLabel" transform="translate(42.6328125,374.7531280517578)" style="opacity: 1;">
                    <g transform="translate(-14.125,-9.5)" class="label">
                        <rect rx="0" ry="0" width="28.25" height="19"></rect>
                        <foreignObject width="28.25" height="19">
                            <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
                                <span id="L-L-C-D" class="edgeLabel L-LS-C' L-LE-D">One</span>
                            </div>
                        </foreignObject>
                    </g>
                </g>
                <g class="edgeLabel" transform="translate(161.03125,374.7531280517578)" style="opacity: 1;">
                    <g transform="translate(-13.7890625,-9.5)" class="label">
                        <rect rx="0" ry="0" width="27.578125" height="19"></rect>
                        <foreignObject width="27.578125" height="19">
                            <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
                                <span id="L-L-C-E" class="edgeLabel L-LS-C' L-LE-E">Two</span>
                            </div>
                        </foreignObject>
                    </g>
                </g>
                <g class="edgeLabel" transform="translate(275.0234375,374.7531280517578)" style="opacity: 1;">
                    <g transform="translate(-20.8515625,-9.5)" class="label">
                        <rect rx="0" ry="0" width="41.703125" height="19"></rect>
                        <foreignObject width="41.703125" height="19">
                            <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
                                <span id="L-L-C-F" class="edgeLabel L-LS-C' L-LE-F">Three</span>
                            </div>
                        </foreignObject>
                    </g>
                </g>
            </g>
            <g class="nodes">
                <g class="node default" id="A" transform="translate(161.03125,27.5)" style="opacity: 1;">
                    <rect rx="0" ry="0" x="-45.0390625" y="-19.5" width="90.078125" height="39" class="label-container"></rect>
                    <g class="label" transform="translate(0,0)">
                        <g transform="translate(-35.0390625,-9.5)">
                            <foreignObject width="70.078125" height="19">
                                <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Christmas</div>
                            </foreignObject>
                        </g>
                    </g>
                </g>
                <g class="node default" id="B" transform="translate(161.03125,135.5)" style="opacity: 1;">
                    <rect rx="5" ry="5" x="-53.6015625" y="-19.5" width="107.203125" height="39" class="label-container"></rect>
                    <g class="label" transform="translate(0,0)">
                        <g transform="translate(-43.6015625,-9.5)">
                            <foreignObject width="87.203125" height="19">
                                <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Go shopping</div>
                            </foreignObject>
                        </g>
                    </g>
                </g>
                <g class="node default" id="C" transform="translate(161.03125,272.6265640258789)" style="opacity: 1;">
                    <polygon points="67.6265625,0 135.253125,-67.6265625 67.6265625,-135.253125 0,-67.6265625" transform="translate(-67.6265625,67.6265625)" class="label-container"></polygon>
                    <g class="label" transform="translate(0,0)">
                        <g transform="translate(-45.640625,-9.5)">
                            <foreignObject width="91.28125" height="19">
                                <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Let me think</div>
                            </foreignObject>
                        </g>
                    </g>
                </g>
                <g class="node default" id="D" transform="translate(42.6328125,428.7531280517578)" style="opacity: 1;">
                    <rect rx="0" ry="0" x="-34.6328125" y="-19.5" width="69.265625" height="39" class="label-container"></rect>
                    <g class="label" transform="translate(0,0)">
                        <g transform="translate(-24.6328125,-9.5)">
                            <foreignObject width="49.265625" height="19">
                                <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Laptop</div>
                            </foreignObject>
                        </g>
                    </g>
                </g>
                <g class="node default" id="E" transform="translate(161.03125,428.7531280517578)" style="opacity: 1;">
                    <rect rx="0" ry="0" x="-33.765625" y="-19.5" width="67.53125" height="39" class="label-container"></rect>
                    <g class="label" transform="translate(0,0)">
                        <g transform="translate(-23.765625,-9.5)">
                            <foreignObject width="47.53125" height="19">
                                <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">iPhone</div>
                            </foreignObject>
                        </g>
                    </g>
                </g>
                <g class="node default" id="F" transform="translate(275.0234375,428.7531280517578)" style="opacity: 1;">
                    <rect rx="0" ry="0" x="-30.2265625" y="-19.5" width="60.453125" height="39" class="label-container"></rect>
                    <g class="label" transform="translate(0,0)">
                        <g transform="translate(-20.2265625,-9.5)">
                            <foreignObject width="40.453125" height="19">
                                <div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">
                                    <i class="fa fa-car"></i> Car</div>
                            </foreignObject>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

Expected rendering

image

Actual rendering

image

Used Versions

Version 3.1.1 (NET Framework)

NinjaCross commented 2 years ago

Hi ! Are there news about this ?