SVG 不可点击，内联 SVG 与 datauri 未显示答案

【问题标题】：SVG not clickable and inline SVG with datauri not shownSVG 不可点击，内联 SVG 与 datauri 未显示
【发布时间】：2018-10-19 06:28:13
【问题描述】：

我有一个名为 cherry.svg 的 SVG 文件，其定义如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" width="800px" height="1280px" viewBox="0 0 800 1280" enable-background="new 0 0 800 1280" xml:space="preserve">
    <image id="image0" width="800" height="1280" x="0" y="0"


    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAUACAIAAAAwbqEzAAABHGlDQ1BpY2MAACiRY2BgMnB0cXJl
EmBgyM0rKQpyd1KIiIxSYD/PwMbAzAAGicnFBY4BAT4gdl5+XioDBvh2jYERRF/WBZmFKY8XcCUX
FJUA6T9AbJSSWpzMwMBoAGRnl5cUAMUZ5wDZIknZYPYGELsoJMgZyD4CZPOlQ9hXQOwkCPsJiF0E
9ASQ/QWkPh3MZuIAmwNhy4DYJakVIHsZnPMLKosy0zNKFAwtLS0VHFPyk1IVgiuLS1JzixU885Lz
iwryixJLUlOAaiHuAwNBiEJQiGkANVpokuhvggAUDxDW50Bw+DKKnUGIIUByaVEZlMnIZEyYjzBj
jgQDg/9SBgaWPwgxk14GhgU6DAz8UxFiaoYMDAL6DAz75gAAwMZP/aCJEEUAAAAgY0hSTQAAeiYA....... (lines of rubbish)

    <a xlink:href="http://www.google.com">
        <rect x="535" y="28" fill="#fff" opacity="0.8" width="150" height="750" />
    </a>
</svg>

还有一个简单的页面来展示它：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Index</title>
        <style>
            /* Make the image responsive */
            img {
              height: 100%;
              width: auto;
              z-index: 2000;
            }

            .center {
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 50%;
            }

        </style>
    </head>
    <body>
    <div>
        <img src="img/cherry.svg" class="center">
    </div>
    </body>
</html>

当我在浏览器中打开时，它是不可点击的，但是如果我右键单击图像并“在另一个选项卡中打开图像”，它就可以了。

Chrome/IE 报告相同。

我在某处读到“只能点击内联 SVG”。好的，但是如果我在主页中包含<svg></svg> 图像，则无法识别它并且浏览器报告错误并且图像未显示。

现在呢？

【问题讨论】：

“现在怎么办？” - 现在你欠我们一个恰当的例子，说明你是如何尝试将它直接嵌入 HTML 中的，以便我们检查你是否正确地这样做了，或者可能搞砸了（例如，天真地将 SVG 的 XML 声明和文档类型也复制到 HTML 中。）
标签中的任何内容都不是交互式的。您需要使用
谢谢大家。我已经弄清楚原因了。请参阅下面的说明。

标签： html svg xlink

【解决方案1】：

谢谢大家。 @CBroe 我将在这里解释我做了什么。而且我不想使用<object> 或<iframe>，我认为这太过分了。

我将 SVG 嵌入到我的页面中，例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Purple index</title>
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery -->
        <script type="text/javascript" src="js/jquery.js"></script>
        <!-- Bootstrap Core JavaScript -->
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <style>
            /* Make the image responsive */
            img {
              height: 100%;
              width: auto;
              z-index: 2000;
            }

            .center {
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 50%;
            }

        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="page-wrapper">

                <div class="container-fluid">
                    <div class="center">
                        <!-- <img src="img/cherry.svg" class="center"> -->
                        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                            x="0px" y="0px" width="800px" height="1280px" viewBox="0 0 800 1280" enable-background="new 0 0 800 1280" xml:space="preserve">
                            <image id="image0" width="800" height="1280" x="0" y="0" 

                            xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAUACAIAAAAwbqEzAAABHGlDQ1BpY2MAACiRY2BgMnB0cXJl
                                EmBgyM0rKQpyd1KIiIxSYD/PwMbAzAAGicnFBY4BAT4gdl5+XioDBvh2jYERRF/WBZmFKY8XcCUX
                                FJUA6T9AbJSSWpzMwMBoAGRnl5cUAMUZ5wDZIknZYPYGELsoJMgZyD4CZPOlQ9hXQOwkCPsJiF0E
                                9ASQ/QWkPh3MZuIAmwNhy4DYJakVIHsZnPMLKosy0zNKFAwtLS0VHFPyk1IVgiuLS1JzixU885Lz.... />
                            <a xlink:href="http://www.google.com">
                                <rect x="59" y="491" fill="#fff" opacity="0" width="452" height="89" />
                            </a>
                            <a xlink:href="http://www.youtube.com">
                                <rect x="59" y="601" fill="#fff" opacity="0" width="452" height="89" />
                            </a>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

并且浏览器似乎在datauri 部分的换行符处失败。我认为它只是识别一行中的数据。

我加入了所有行，现在一切都很好。棘手。

PS：我使用这个网站将 JPG（一个相当复杂的）转换为 SVG：https://www.aconvert.com/image/jpg-to-svg/。输出质量很高，但datauri 带有换行符。只是提醒大家，您必须查看文件内容以避免我的情况。

【讨论】：