ioprst

Новенький
  • Публикации

    17
  • Зарегистрирован

  • Посещение

Репутация

0 Обычная

О ioprst

  • Звание
    Новичок

Информация

  • Пол
    мужской
  1. ioprst

    Масштабирование объекта SVG

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1088 1088" preserveAspectRatio="xMinYMin meet" style="background:#31C184"> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>testPrj</title> <style> body, html {width: 100%; height: 100%; margin: 0; padding: 0} .row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;} .first-row {display: table-row; overflow: auto;} .second-row {display: table-row; height: 100%; overflow: hidden } .second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;} </style> </head> <body bgcolor="#0974F7"> <div class="row-container"> <div class="first-row"> <h1>test</h1> <button onclick='location.href="Auto.html"'>Auto</button> </div> <div class="second-row"> <iframe frameborder="0" marginwidth="0" marginheight="0" width="100%" height="100%" src="Auto.svg" id="AutoId"></iframe> </div> </div> <script type="text/javascript" src="Auto.js"></script> </body> </html> 1) шапка svg 2) html код Может быть пригодится кому-то.
  2. Привет. Подскажите как правильно объявить svg объект, чтобы он занял все свободного пространство экрана и при этом не "вылезал" вниз. Например у меня есть svg (большой код, т.к. в ней просто 17 одинаковых элементов, которые расположены по главной горизонтали): <svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="1088px" style="background:#FFFFFF" version="1.1" width="1088px"> <defs> <style type="text/css"> .default_default { fill: #E4801B; stroke: #000000; stroke-width: 1.0px; } </style> </defs> <g id="root" transform="translate(0,0)"> <g id="Auto" class="default_default" transform=" translate(0,0) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c0trumpet"/> <rect y="26" x="3" height="12" width="2" id="c0flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c0flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c0flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c0flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c0flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c0flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c0flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c0flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> <g id="Auto" class="default_default" transform=" translate(576,576) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c1trumpet"/> <rect y="26" x="3" height="12" width="2" id="c1flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c1flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c1flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c1flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c1flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c1flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c1flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c1flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> <!-- тут еще 14 групп с id="Auto"--> <g id="Auto" class="default_default" transform=" translate(960,960) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c15trumpet"/> <rect y="26" x="3" height="12" width="2" id="c15flow0" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="11" height="12" width="2" id="c15flow1" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="19" height="12" width="2" id="c15flow2" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="27" height="12" width="2" id="c15flow3" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="35" height="12" width="2" id="c15flow4" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="43" height="12" width="2" id="c15flow5" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="51" height="12" width="2" id="c15flow6" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <rect y="26" x="59" height="12" width="2" id="c15flow7" style="opacity:0.25;fill:#0000ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.02602547;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> </g> </g> </svg> Auto.html выглядит следующим образом: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div class="menu"> <a href="Auto.html">Untitled</a> <div> <object id="AutoId" type="image/svg+xml" data="Auto.svg"></object> </div> <script type="text/javascript" src="Auto.js"></script> </div> </body> </html> Таким образом я получаю страницу, которая представлена на рисунке 1. Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под <a>Untitled</a> так, чтобы вниз страница не прокручивалась.
  3. ioprst

    Доступ к файлам не из папки Apache

    А где это найти? Вообще я просто в svg файле ссылаюсь на изображение, типа такого: style="background:url(d:\project\u_classes\build\example_of_using_styles\img.jpg)" но вот изображения нет. Я понимаю, что апач блокирует подобные обращения, т.к. дальше /cgi-bin и /htdocs не пускает. Но вот то, что вы предлагаете, нигде не найду в самом апаче.
  4. Привет. Подскажите пожалуйста, что нужно настроить в конфиге apache24, чтобы локальная страничка могла обрабатывать данные с любого места жесткого диска. Сейчас проблема в том, что я пытаюсь на страничке вызвать изображение (указываю полный путь), которое расположено, например, на флешке, но всегда выводит белый фон.
  5. Привет. Подскажите, пожалуйста, как в svg файле (<defs>...</defs>) указать цвета и цвета строк, которые могут использоваться в документе. Например градиент указывается так: <defs> <linearGradient id="linearGradientDefault"> <stop offset="0" stop-color="#808080" stop-opacity="1"/> <stop offset="0.5" stop-color="#FFFFFF" stop-opacity="1"/> <stop offset="1" stop-color="#404040" stop-opacity="1"/> </linearGradient> <linearGradient y2="40" x2="0" y1="24" x1="0" gradientUnits="userSpaceOnUse" id="linearGradientPipe" xlink:href="#linearGradientDefault" inkscape:collect="always"/> </defs> И к нему можно обратиться следующим образом через url: <rect y="24" x="0" height="16" width="64" id="c0trumpet" style="fill:url(#linearGradientPipe);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.18708867"/> А вот как указать просто цвет или цвет строки информации не найду. Вариант "просто указать в элементе fill:#RRGGBB" не подходит.
  6. ioprst

    Анимация SVG средствами JS

    Решено. var svgDoc; var control_switch; window.onload = function () { svgDoc = document.getElementById("switchid").contentDocument; initClick(); } function initClick() { control_switch = svgDoc.getElementById("switch"); control_switch.onclick = function () { // func text } }
  7. Привет. Подскажите, пожалуйста, почему данный код может не работать: var svgDoc; window.onload = function() { svgDoc = document.getElementById("switchid").contentDocument; } var switch_ = svgDoc.getElementById("switch"); switch_.onclick = function() { current_position = Number(switch_.getAttribute("y")); if(current_position == 32) { // off switch_.setAttribute("y", "9"); switch_.setAttribute("style", "fill:#00ff00"); } else { switch_.setAttribute("y", "32"); switch_.setAttribute("style", "fill:#ff0000"); } } Суть проста. Подключаюсь к svg на странице. И хочу по клику на определенный прямоугольник (id="switch") переводить его из одного положения в другое, ну и цвет меняю. Если все это перенести в функцию события window.onload, то работает, но такой вариант не подходит.
  8. ioprst

    Растянуть svg на весь экран

    adrey7287, width="100vw" попробовал, ничего не меняется, также мелкая картинка в углу. сама картинке (svg) имеет размеры 64х64px (это та, что truba), но вообще я загружаю на сайд svg которая имеет размеры: height="100%" width="100%".
  9. ioprst

    XMLHttpRequest не работает в chrome

    Ну проблема была в моей неопытности разработки js. Ну и кэш в хроме советую отключать, т.к. он мозги моросит, когда тестирую свое приложение через localhost
  10. Привет. Подскажите, пожалуйста, как растянуть svg на весь экран и возможно ли это вообще. Например, есть svg как в приложении (truba.svg), может быть ситуация, что таких svg будет несколько (естественно, объединенных в одну). svg на страничке отображаю следующим образом: <object id="svg_id" type="image/svg+xml" width="1024" height="768" data="svg_name.svg"></object> Также, если кто знает, подскажите, что можно/нужно почитать для решения следующей проблемы: есть на страничке svg, например, на svg нарисована кнопка, и если нажать на эту кнопку, происходит какое-то событие, на которое js реагирует. Спасибо.
  11. ioprst

    XMLHttpRequest не работает в chrome

    Тема закрыта.
  12. ioprst

    Несколько js на одной html странице

    Вкладки переключаются через HTML. У меня data_send это не просто какое-то значение, а список имен переменных, которые я бы хотел обновлять (запрашивать у сервера).
  13. ioprst

    Несколько js на одной html странице

    Switch74, не могли бы вы пояснить, 1) что значит "на вкладке можно держать data-send". 2) И что касается "можно вызывать функцию анимации при открытии вкладки", это делается средствами js или html? Спасибо.
  14. Привет. Проблема в следующем. Есть одна страничка, на которой две вкладки, на второй вкладке исполняется js. В firefox'e все как надо, запускаю localhost и на какой-бы вкладке изначально я не оказался, анимация svg (js выполняет) работает, после перехода с 2ой вкладки на первую и обратно, анимация также работает. Что происходит в Хроме: Если я запускаю страницу (перезапускаю) и оказываюсь на второй вкладке, то анимация есть, стоит перейти с 2ой вкладки на 1ю и обратно, анимация пропадает. Суть в том, что в хроме при любом переходе между вкладками js перестает работать, либо проблема в XMLHttpRequest. Привожу js код, который исполняется на второй вкладке: var svgDoc; var xhr; var c1_boolFlow = false; window.onload = function() { svgDoc = document.getElementById("cns2Id").contentDocument; var timer = setInterval(anim, 100); var timerPost = setInterval(setPost, 100); } function anim() { c1anim(); } // Функция отправки запроса function setPost() { xhr = new XMLHttpRequest(); var send = ["c1_boolFlow"]; xhr.open("POST", 'cgi-bin/getVars.py', true); xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8') xhr.onreadystatechange = onResponse; xhr.send(send); } // Функция обработки ответа function onResponse() { if (xhr.readyState != 4) { return; } var respJSON = JSON.parse(xhr.responseText); c1_boolFlow = respJSON.c1_boolFlow; } ...
  15. ioprst

    Несколько js на одной html странице

    Спасибо. А что касается того факта, что после переключения между вкладками на странице js перестает работать, есть мысли? Т.е. я даже для теста оставил вообще один js, который анимирует svg на первой вкладке. Запускаю страничку, анимация идет, перехожу на вторую вкладку, снова на первую - анимации нет. Перезагружаю страницу, анимация появляется.