'How to scale inline svg element with pure css without modifying the svg code itself?

Background: I'm integrating mermaidjs into revealjs like in the code snippet attached in the end. The graph generated by mermaid is computed on the fly and then injected directly into HTML as an inline svg element, but renders a very small image.

Question: Assuming the svg cannot be adjusted conveniently (coz I cannot find any mermaid option to set the viewport stuff), is it possible to stretch the rendered image with pure css approach?

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Title</title>

    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/reveal.js/4.1.0/reset.min.css" type="text/css" rel="stylesheet" />
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/reveal.js/4.1.0/reveal.css" type="text/css" rel="stylesheet" />
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/reveal.js/4.1.0/theme/black.min.css" type="text/css" rel="stylesheet" />
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/reveal.js/4.1.0/plugin/highlight/monokai.min.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="reveal">
        <div class="slides">
            <section data-markdown data-separator="^\n\n\n">
                <textarea data-template>
```mermaid
classDiagram
class Book {
    String isbn
    String name
    double price
}
```
        </textarea>
            </section>
        </div>
    </div>

    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/reveal.js/4.1.0/reveal.min.js" type="application/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/reveal.js/4.1.0/plugin/markdown/markdown.min.js" type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/mermaid/8.14.0/mermaid.min.js" type="application/javascript"></script>
    <script>
        const CODE_LINE_NUMBER_REGEX = /\[([\s\d,|-]*)\]/;
        const HTML_ESCAPE_MAP = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        };
        const renderer = new (RevealMarkdown()).marked.Renderer();
        const escapeForHTML = input => input.replace(/([&<>'"])/g, char => HTML_ESCAPE_MAP[char]);
        renderer.code = function (code, language) {
            if (language.match(/^mermaid/)) {
                return '<div class="mermaid">' + code + '</div>';
            } else {
                let lineNumbers = '';
                if (CODE_LINE_NUMBER_REGEX.test(language)) {
                    lineNumbers = language.match(CODE_LINE_NUMBER_REGEX)[1].trim();
                    lineNumbers = `data-line-numbers="${lineNumbers}"`;
                    language = language.replace(CODE_LINE_NUMBER_REGEX, '').trim();
                }
                code = escapeForHTML(code);
                return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
            }
        };
        mermaid.initialize({
            startOnLoad: true,
            theme: 'dark',
        });
        Reveal.initialize({
            hash: true,
            transition: 'none',
            slideNumber: true,
            markdown: {
                renderer
            },
            plugins: [RevealMarkdown]
        });
    </script>
</body>

</html>
htmlcsssvgmermaid


Solution 1:[1]

I ran your code and this is the SVG element it generated:

<svg id="mermaid-1651128942542"
  width="100%"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
  height="143.7999267578125"
  style="max-width: 117.17498779296875px;"
  viewBox="0 0 117.17498779296875 143.7999267578125">

So the max-width value in the style attribute is going to override any width you try apply to the image using CSS.

Would a 2D scale transform achieve what you need? Like this:

.data-markdown svg {transform: scale(2);}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Brett Donald

Related Questions