Размер SVG в Safari - PullRequest
       3

Размер SVG в Safari

1 голос
/ 10 января 2012

У меня проблемы с работой изображений SVG в разных браузерах. Сначала у меня было много проблем с IE 8, но после многих обходных путей это наконец работает. Теперь Safari является большой проблемой, что удивительно, поскольку я думал, что это будет иметь сильную поддержку SVG из того, что я прочитал.

Так вот в чем проблема:

Я создаю HTML-страницы для приложений веб-справки, и это делается через XSL. Это преобразование создает файлы HTML с объектными элементами, включающими файлы SVG:

<object
  type="image/svg+xml" class="image"
  id="Push12Principschema__image_538dabf9-da61-46a1-99c4-863a880aed46"
  data="/handbok/images/Push12_5039/Ettrors.svg"> </object>

Теперь у файлов SVG есть окно просмотра с фиксированными значениями в пикселях, а затем ширина и высота установлены на 100%, чтобы можно было масштабировать изображение путем масштабирования элемента обертывающего объекта.

Поэтому я использую jQuery, чтобы установить ширину (высота не требуется для большинства браузеров) сначала на 50%. Затем, если пользователь нажимает на изображение, оно масштабирует ширину объекта до 100%.

Это прекрасно работает во всех браузерах, кроме Safari.

Начнем с того, что Safari даже не показывает изображение svg в полном размере (или даже на 50%, если я его установлю), но очень уменьшенный размер, вероятно, размер значений окна просмотра.

Так что, хотя я пытаюсь (для тестирования) установить ширину тега объекта на 100%, это не имеет значения. Все остальные браузеры занимают все доступное место на странице, если я делаю это.

И, конечно же, масштабирование также не работает (если я изначально установил его на 50%).

Я также попытался специально установить высоту на 100%. Это тоже не поможет.

Единственное, что, похоже, работает в Safari - это установить фиксированное значение в пикселях как для ширины, так и для высоты. Это показывает изображение в приличном размере.

Но это не то, что я могу легко сделать, потому что я не знаю точный размер изображений или даже соотношение.

Так почему же он работает во всех браузерах, кроме Safari, и что мне делать для поддержки Safari?

РЕДАКТИРОВАТЬ: Извините, опубликовал неправильный код для используемого элемента объекта. Я на самом деле создаю несколько и скрываю ненужные для разных браузеров. То, что я изменил здесь сейчас, это то, что показывается всем браузерам, кроме IE8.

РЕДАКТИРОВАТЬ 2:

Рискуя сделать этот пост очень длинным, я подумал, что будет хорошей идеей опубликовать код SVG. У меня есть большое количество изображений SVG, сохраненных в Illustrator из изображений EPS. Я узнал, что они получают фиксированные значения пикселей по ширине и высоте, которые не работают для масштабирования в большинстве браузеров. Поэтому я заменил поиск по ширине и высоте атрибутов, используя XPath до 100% значений. Кроме того, поскольку я заметил, что с артбордом в большинстве изображений было что-то не так, я попытался сохранить изображения svg с помощью команды «Сохранить для Интернета и устройств» в Illustrator, снова выбрав SVG в качестве выходного формата. Это исправило артборд, по крайней мере, когда вы его там просматриваете.

Итак, здесь я выполнил «Сохранить для Интернета и устройств», чтобы попытаться исправить артборд, а также изменил ширину и высоту на 100%:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="100%" height="100%" viewBox="-0.5 -0.21 613 485"
     overflow="visible" enable-background="new -0.5 -0.21 613 485" xml:space="preserve">
<defs>
</defs>
<path stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M90.626,274.561
    c0-115.164,93.354-208.518,208.515-208.518c115.16,0,208.515,93.354,208.515,208.518c0,115.161-93.355,208.507-208.515,208.507
    C183.979,483.068,90.626,389.722,90.626,274.561L90.626,274.561z"/>
<path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M104.269,274.561
    c0-107.627,87.248-194.875,194.872-194.875c107.625,0,194.875,87.248,194.875,194.875c0,107.626-87.25,194.867-194.875,194.867
    C191.517,469.428,104.269,382.187,104.269,274.561L104.269,274.561z"/>
<path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M136.748,274.561
    c0-89.693,72.703-162.396,162.391-162.396c89.695,0,162.396,72.706,162.396,162.396c0,89.688-72.704,162.389-162.396,162.389
    C209.451,436.95,136.748,364.246,136.748,274.561L136.748,274.561z"/>
<path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M171.824,274.561
    c0-70.319,57-127.319,127.314-127.319c70.314,0,127.319,57.002,127.319,127.319c0,70.316-57.005,127.312-127.319,127.312
    C228.824,401.873,171.824,344.877,171.824,274.561L171.824,274.561z"/>
<path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M274.895,64.161H17.568 M267.857,484.169
    H17.568 M45.729,86.842v374.646"/>
<polygon points="45.729,88.154 37.848,88.154 45.729,68.455 53.606,88.154 "/>
<polygon points="45.729,460.183 53.606,460.183 45.729,479.877 37.848,460.183 "/>
<path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M612,182.266H323.888 M612,366.844H335.624
     M593.232,207.293V348.08"/>
<polygon points="593.232,208.605 585.351,208.605 593.232,188.906 601.114,208.605 "/>
<polygon points="593.232,346.763 601.114,346.763 593.232,366.467 585.351,346.763 "/>
<text transform="matrix(0 -1 1 0 556.5376 309.7231)" font-family="'FoundryFormSans-Book'" font-size="36.535">d</text>
<text transform="matrix(0 -1 1 0 565.4243 291.2427)" font-family="'FoundryFormSans-Book'" font-size="36.535">u</text>
<text transform="matrix(0 -1 1 0 30.4517 278.7349)" font-family="'FoundryFormSans-Book'" font-size="36.535">D</text>
<path fill="#FFFFFF" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M205.919,274.561
    c0-51.488,41.734-93.222,93.219-93.222c51.488,0,93.222,41.734,93.222,93.222c0,51.48-41.733,93.224-93.222,93.224
    C247.656,367.785,205.919,326.042,205.919,274.561L205.919,274.561z"/>
<path fill="#B1B3B4" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M227.433,274.561
    c0-39.606,32.104-71.71,71.708-71.71c39.601,0,71.713,32.104,71.713,71.71c0,39.604-32.112,71.705-71.713,71.705
    C259.538,346.264,227.433,314.162,227.433,274.561L227.433,274.561z"/>
<path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M390.374,250.593V35.22 M368.476,250.593
    V35.22 M448.254,46.701h-36.514"/>
<polygon points="413.055,46.701 413.055,54.579 393.35,46.701 413.055,38.821 "/>
<line fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" x1="327.018" y1="46.701" x2="342.413" y2="46.701"/>
<polygon points="341.095,46.701 341.095,38.821 360.802,46.701 341.095,54.579 "/>
<text transform="matrix(1 0 0 1 415.5356 30.4517)" font-family="'FoundryFormSans-Book'" font-size="36.535">s</text>
</svg>

А вот еще одно (другое изображение) со значениями ширины и высоты, измененными на 100%, но без выполнения команды «Сохранить для Интернета и устройств»:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!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="100%" height="100%" viewBox="0 0 121.057 96.619" enable-background="new 0 0 121.057 96.619"
     xml:space="preserve">
<g>
    <path stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M17.357,56.287c0-22.063,17.886-39.95,39.951-39.95
        s39.95,17.886,39.95,39.95c0,22.064-17.885,39.951-39.95,39.951S17.357,78.351,17.357,56.287L17.357,56.287z"/>
    <path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M19.971,56.287
        c0-20.62,16.716-37.336,37.337-37.336c20.62,0,37.336,16.716,37.336,37.336c0,20.621-16.717,37.338-37.336,37.338
        C36.687,93.625,19.971,76.908,19.971,56.287L19.971,56.287z"/>
    <path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M26.194,56.287
        c0-17.183,13.93-31.113,31.114-31.113c17.184,0,31.114,13.93,31.114,31.113c0,17.186-13.93,31.115-31.114,31.115
        C40.124,87.402,26.194,73.472,26.194,56.287L26.194,56.287z"/>
    <path fill="#ECEDED" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M32.417,56.287
        c0-13.747,11.144-24.891,24.892-24.891c13.747,0,24.891,11.144,24.891,24.891c0,13.748-11.145,24.893-24.891,24.893
        C43.561,81.179,32.417,70.035,32.417,56.287L32.417,56.287z"/>
    <path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M52.663,15.976H3.359 M51.313,96.449
        H3.359 M8.754,20.322v71.781"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="8.754,20.573 7.245,20.573 8.754,16.799 10.264,20.573 8.754,20.573  "/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="8.754,91.851 10.264,91.851 8.754,95.626 7.245,91.851 8.754,91.851  "/>

        <line fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" x1="117.459" y1="41.51" x2="117.459" y2="51.402"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="117.459,41.762 115.949,41.762 117.459,37.988 118.969,41.762 
        117.459,41.762  "/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="117.459,51.15 118.969,51.15 117.459,54.923 115.949,51.15 
        117.459,51.15   "/>

        <line fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" x1="116.053" y1="67.226" x2="116.053" y2="71.123"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="116.053,67.478 114.543,67.478 116.053,63.705 117.563,67.478 
        116.053,67.478  "/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="116.053,70.871 117.563,70.871 116.053,74.646 114.543,70.871 
        116.053,70.871  "/>
    <text transform="matrix(0 -1 1 0 110.4395 52.4497)" font-family="'FoundryFormSans-Book'" font-size="7">d</text>
    <text transform="matrix(0 -1 1 0 112.1309 48.9048)" font-family="'FoundryFormSans-Book'" font-size="7">u</text>
    <text transform="matrix(0 -1 1 0 109.0215 75.4048)" font-family="'FoundryFormSans-Book'" font-size="7">d</text>
    <text transform="matrix(0 -1 1 0 110.7168 71.8579)" font-family="'FoundryFormSans-Book'" font-size="7">u</text>
    <text transform="matrix(0 -1 1 0 5.8345 57.0923)" font-family="'FoundryFormSans-Book'" font-size="7">D</text>
    <path fill="#D9DADB" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M38.433,56.287
        c0-10.423,8.45-18.874,18.875-18.874c10.424,0,18.875,8.451,18.875,18.874c0,10.426-8.451,18.875-18.875,18.875
        C46.883,75.162,38.433,66.712,38.433,56.287L38.433,56.287z"/>
    <path fill="#FFFFFF" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M47.831,46.629
        c0-5.062,4.104-9.165,9.165-9.165c5.063,0,9.165,4.104,9.165,9.165s-4.102,9.165-9.165,9.165
        C51.934,55.794,47.831,51.691,47.831,46.629L47.831,46.629z"/>
    <path fill="#B1B3B4" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M49.946,46.629
        c0-3.894,3.156-7.05,7.05-7.05c3.895,0,7.049,3.157,7.049,7.05s-3.155,7.05-7.049,7.05C53.102,53.679,49.946,50.523,49.946,46.629
        L49.946,46.629z"/>
    <path fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M119.648,63.031H59.502 M119.648,74.72
        H61.301 M121.057,37.314H62.559 M121.057,54.998h-56.85 M66.221,44.898V5.377 M63.672,43.399V5.377 M59.327,10.172h-2.848"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="59.075,10.172 59.075,8.663 62.85,10.172 59.075,11.682 59.075,10.172    
        "/>

        <line fill="none" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" x1="70.715" y1="10.172" x2="79.408" y2="10.172"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" points="70.967,10.172 70.967,11.682 67.193,10.172 70.967,8.663 70.967,10.172   
        "/>
    <text transform="matrix(1 0 0 1 72.9902 5.8345)" font-family="'FoundryFormSans-Book'" font-size="7">s</text>
    <path fill="#87888A" d="M38.611,56.263h37.385c0,0-0.068,2.58-0.697,5.1c-0.648,2.586-2.127,5.16-3.703,7.006
        c-2.023,2.375-4.693,4.168-5.793,4.619c-1.1,0.453-3.105,1.361-4.076,1.619c0,0-2.77,0.49-3.934,0.49s-3.844-0.148-5.202-0.537
        c-1.358-0.389-4.266-1.615-5.452-2.477c-1.423-1.035-3.539-2.889-4.314-3.924s-2.305-3.016-2.887-4.633s-1.226-4.268-1.291-4.721
        C38.583,58.353,38.611,56.263,38.611,56.263L38.611,56.263z"/>
    <path fill="#FFFFFF" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M51.224,68.933
        c0-3.238,2.626-5.865,5.866-5.865s5.865,2.627,5.865,5.865c0,3.24-2.625,5.865-5.865,5.865S51.224,72.173,51.224,68.933
        L51.224,68.933z"/>
    <path fill="#B1B3B4" stroke="#000000" stroke-width="0.3398" stroke-miterlimit="3.8637" d="M52.758,68.933
        c0-2.393,1.939-4.332,4.332-4.332s4.332,1.939,4.332,4.332s-1.94,4.332-4.332,4.332S52.758,71.326,52.758,68.933L52.758,68.933z"/>
</g>
</svg>

Теперь, я совсем немного знаю о SVG, но думаю, что с ними что-то не так. Потому что, если я смотрю на страницу HTML с помощью FireBug или веб-инспектора в Safari и удерживаю курсор над элементами svg в коде, затененный прямоугольник, обозначающий область элемента, не совпадает с фактическим изображением. Скорее, он отображается в виде теневого прямоугольника вне изображения и иногда занимает почти всю страницу ...

Так может ли проблема быть как-то связана с кодом SVG? Что странно, так это то, что ничего из этого не вызывает проблем в других браузерах, даже в Chrome, которые, как я ожидаю, будут вести себя аналогично Safari ...

1 Ответ

0 голосов
/ 10 января 2012

Попробуйте изменить атрибуты classid => type и src => data, иначе я даже не смогу просмотреть свой SVG-скрипт.Этот CSS помог мне:

html, body {
    height: 100%;
}

О, еще одна вещь, мои браузеры кэшируют SVG при отображении с object, так что вы также можете захотеть очистить кеш браузера.По какой-то причине embed не кэшируется.

Полный пример:

rect.svg

<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 400 200">
    <rect x="110" y="50" width="200" height="150" fill="red"/>
</svg>

demo.html

<!doctype html>
<html>
<head>
<style>
html, body {
  height: 100%;
}
</style>
</head>
<body>
<embed width="100%" height="100%" type="image/svg+xml" src="rect.svg"/>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...