SVG не кликабелен и встроенный SVG с datauri не показан - PullRequest
Новая
       52

SVG не кликабелен и встроенный SVG с datauri не показан

0 голосов
/ 09 мая 2018

У меня есть файл SVG с именем cherry.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> на главной странице, оно не будет распознано, и браузеры сообщат об ошибке, а изображение не отобразится.

Что теперь?

1 Ответ

0 голосов
/ 09 мая 2018

Спасибо за все. @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. Я думаю, что он просто распознает данные в одну строку.

Я присоединился ко всем линиям, и теперь все в порядке. Tricky.

PS: Я преобразовал JPG (довольно сложный) в SVG с этим сайтом: https://www.aconvert.com/image/jpg-to-svg/. Вывод высокого качества, но datauri идет с переносами строк. Просто чтобы напомнить всем, что вы должны изучить содержимое файла, чтобы избежать моей ситуации.

...