Вопросы Теги

Как клонировать объекты SVG [дублировать]

Определенно любая реализация Autocomplete будет работать в вашем сценарии.

Решение 1: Используйте поле выбора автозаполнения

  • Если вы не хотите тратить пропускную способность или хотите поддерживать устройства с низкой спецификацией, вы должны пойти в AutoComplete с извлечением данных на стороне сервера.
  • Если вы хотите иметь высокую удобство использования и не заботитесь о пропускной способности, вы можете использовать автозаполнение с локальными данными (Fetch 50k записывается один раз и привязать к автозаполнению). Но чтобы убедиться, что вы не рисуете все эти данные в DOM за один раз. Вы должны ограничить записи, отображаемые в определенное время.

Решение 2: использовать select с виртуализацией

  • Но если вы хотите дать лучшее из удобство использования для ваших клиентов, вы должны пойти с решением, в котором виртуализирован ваш поле выбора, и данные, загруженные в DOM при прокрутке окна выбора. По виртуализации вы убедитесь, что только те элементы попадают в DOM, которые отображаются на экране в этот момент времени. Здесь вы можете найти виртуальный select jQuery здесь . Аналогичная реализация в React здесь

6
задан mareoraft 15 April 2014 в 19:25
поделиться

3 ответа

Это кажется более сложным, чем нужно. Начните с вашего пешечного пути в корневом svg. Затем клонируйте и добавьте в root. Одна из важных вещей, которые нужно решить, когда вы клонируете, вы должны изменить идентификатор клонированного элемента. В противном случае вы столкнетесь с конфликтом при обращении к исходному клонированному элементу.

Попробуйте это: 

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>Title</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        </head>
        <body style='font-family:arial'>
            <center>

            <div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400"  xmlns="http://www.w3.org/2000/svg" >
<path id="pawn" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
</svg>
            </div>
            <br />SVG Source:<br />
            <textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
            <br />Javascript:<br />
            <textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
            </center>
<script id=myScript>
var Root=mySVG
function clone(){
 var newPawn=pawn.cloneNode(true)
 newPawn.id="newPawn1"
 var move="translate("+0+","+30+")"
 newPawn.setAttribute("transform",move)
 Root.appendChild(newPawn)
}
</script>
            <script>
            document.addEventListener("onload",init(),false)
            function init()
            {
                clone()
                svgSourceValue.value=svgDiv.innerHTML
                jsValue.value=myScript.text
            }
            </script>
        </body>
    </html>
2
ответ дан Francis Hemsher 25 August 2018 в 12:09
поделиться

Когда вы вызываете getElementById, элемент еще не существует. Поместите скрипт в конец тела: 

<head>
</head>
<body>
    <div style="" width="100px" >
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="bigsvg"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%">
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
        <g transform="translate(0.005) scale(0.022)" id="groupid">
            <path class="onepointsix" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
        </g>
    </svg>
</svg>
    </div>
<script>

var Root=document.documentElement
function clone(){
 var G=document.getElementById("groupid")
 alert('hi')
 var NewG=G.cloneNode(true)
 alert('bye')
 var move="translate("+0+","+30+")"
 NewG.setAttributeNS(null,"transform",move)
 Root.appendChild(NewG)
}
clone()

</script>
</body>
</html>
6
ответ дан Denys Séguret 25 August 2018 в 12:09
поделиться

Чтобы было ясно, что вызывает ошибки:

  1. var Root = document.documentElement ошибочно, потому что нам нужно убедиться, что новый клон добавлен в родительский SVG, а не в конец страницы. Вместо этого мы должны добавить родительскому элементу id = "mySVG", а затем использовать var Root = mySVG.
  2. var G = document.getElementById ("groupid") не захватил элемент 'groupid', потому что код выполнялся до того, как существовал элемент. Решение должно инициировать запуск кода ПОСЛЕ загрузки страницы (использовать событие onload или переместить скрипт в нижнюю часть тела).
  3. var move = "translate (" + 0+ "," +30+ ")" заменяет свойство преобразования в группе SVG, перезаписывая старый перевод И масштаб (0.022). Поэтому, хотя клон существовал после исправления двух вышеперечисленных ошибок, это было настолько далеко, что оно было вне viewBox. Вместо этого я должен использовать var move = "translate (0,1) scale (0.022)"
1
ответ дан mareoraft 25 August 2018 в 12:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: