Question

我有一个名为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>图像，则无法识别，并且浏览器报告错误并且图像未显示。

现在是什么？

Answer 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带有换行符。只是为了提醒所有人，你必须查看文件内容以避免我的情况。

SVG不可点击且内联SVG，数据库未显示

1 个答案: