如何使用纯CSS缩放内联SVG元素而不修改SVG代码本身？

发布于 2025-01-24 19:02:47 字数 3474 浏览 2 评论 0原文

背景：我将MermaIdjs集成到启示js中，例如最后附加的代码片段中。美人鱼生成的图是在即时计算的，然后直接将其作为内联SVG元素注入HTML，但呈现出很小的图像。

问题：假设无法方便地调整SVG（因为我找不到任何美人鱼选项来设置视口东西），是否可以使用纯CSS方法扩展渲染图像？

<!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>

原文

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 = {
            '&': '&',
            '<': '<',
            '>': '>',
            '"': '"',
            "'": '''
        };
        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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怀念你的温柔 2025-01-31 19:02:47

我运行了您的代码，这是它生成的SVG元素：

<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">

因此，max Width style 属性中的值将覆盖任何width您尝试使用CSS应用于图像。

2D量表变换会达到您需要的东西吗？像这样：

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

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);}

回复收藏 0 原文

~没有更多了~

关于作者

烧了回忆取暖

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

如何使用纯CSS缩放内联SVG元素而不修改SVG代码本身？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

牛↙奶布丁

COSO

落叶

暗地喜欢

qq_i8qOEG

qq_Wl4Sbi

友情链接

如何使用纯CSS缩放内联SVG元素而不修改SVG代码本身？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

牛↙奶布丁

COSO

落叶

暗地喜欢

qq_i8qOEG

qq_Wl4Sbi

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。