Встроенное редактирование текста в SVG - PullRequest
Новая
       1

Встроенное редактирование текста в SVG

22 голосов
/ 16 февраля 2012

Я отображаю встроенный SVG на веб-сайте и должен позволить пользователю добавлять и изменять тексты в этом SVG в WYSIWYG-манере.В основном мне нужно что-то вроде svg-edit .Однако мне не нужен полностью WYSIWYG редактор, а только встроенная часть редактирования текста.Я посмотрел на исходный код svg-edit, и мне кажется, что очень трудно извлечь только его часть.

Итак, я ищу простой способ (возможно, со сторонней библиотекой) реализовать встроенное редактирование текста SVG.Я уже думал о замене текста SVG вводом текста HTML, когда он находится в фокусе, но текст должен отображаться в режиме редактирования в точности так, как он отображается в получающемся SVG.

Ответы [ 3 ]

14 голосов
/ 10 мая 2012

РЕДАКТИРОВАТЬ: Для тех, кто находит этот ответ сейчас, проект прекращен и никогда не достиг зрелой стадии: (

Я искал что-то подобное, но не нашел ничего, поэтому я и мой мастерПартнер диссертации решил написать собственное решение, в настоящее время оно работает довольно хорошо в Chrome и довольно хорошо в Firefox.

Демонстрация: http://engelfrost.github.io/svg-input-elements/

Код: https://github.com/engelfrost/svg-input-elements

13 голосов
/ 30 октября 2014

Я сделал скрипку, которая создавала редактируемый текст везде, где вы щелкаете в SVG. Последний шаг - захватить текст HTML и поместить его в элемент SVG.

http://jsfiddle.net/brx3xm59/

Код следует: 

var mousedownonelement = false;

window.getlocalmousecoord = function (svg, evt) {
    var pt = svg.createSVGPoint();
    pt.x = evt.clientX;
    pt.y = evt.clientY;
    var localpoint = pt.matrixTransform(svg.getScreenCTM().inverse());
    localpoint.x = Math.round(localpoint.x);
    localpoint.y = Math.round(localpoint.y);
    return localpoint;
};

window.createtext = function (localpoint, svg) {
    var myforeign = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')
    var textdiv = document.createElement("div");
    var textnode = document.createTextNode("Click to edit");
    textdiv.appendChild(textnode);
    textdiv.setAttribute("contentEditable", "true");
    textdiv.setAttribute("width", "auto");
    myforeign.setAttribute("width", "100%");
    myforeign.setAttribute("height", "100%");
    myforeign.classList.add("foreign"); //to make div fit text
    textdiv.classList.add("insideforeign"); //to make div fit text
    textdiv.addEventListener("mousedown", elementMousedown, false);
    myforeign.setAttributeNS(null, "transform", "translate(" + localpoint.x + " " + localpoint.y + ")");
    svg.appendChild(myforeign);
    myforeign.appendChild(textdiv);

};

function elementMousedown(evt) {
    mousedownonelement = true;
}


$(('#thesvg')).click(function (evt) {
    var svg = document.getElementById('thesvg');
    var localpoint = getlocalmousecoord(svg, evt);
    if (!mousedownonelement) {
        createtext(localpoint, svg);
    } else {
        mousedownonelement = false;
    }
});
0 голосов
/ 13 апреля 2012

Вот пример, где вы можете получить и изменить текст из текстового узла. Я предлагаю написать функцию JavaScript, которая помещает редактируемый div или что-то подобное вместо текстового узла и при сохранении заменяет текстовый узел на innerHTML из div.

Пожалуйста, оставьте окончательный код здесь, когда вам это удастся. 

<html>
  <head>
  <script>
    function svgMod(){ 
      var circle1 = document.getElementById("circle1"); 
      circle1.style.fill="blue";
    } 
    function svgMod2(){ 
      var circle1 = document.getElementById("circle1"); 
      t1.textContent="New content";
    } 
  </script>
  </head>
  <body>
  <svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 800; height: 1000">
  <circle id="circle1" r="100" cx="134" cy="134" style="fill: red; stroke: blue; stroke-width: 2"/>
  <text id="t1" x="50" y="120" onclick="alert(t1.textContent)">Example SVG text 1</text>
  </svg>
  <button onclick=circle1.style.fill="yellow";>Click to change to yellow</button>
  <button onclick=javascript:svgMod();>Click to change to blue</button>
  <button onclick=javascript:svgMod2();>Click to change text</button>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...