Блог

Главная - Вопросы по программированию - SVG с динамическим содержимым в качестве фонового изображения

SVG с динамическим содержимым в качестве фонового изображения

#svg

#svg

Вопрос:

Я понимаю, что тег в SVG в основном используется для событий, но он мне скорее нужен, чтобы избежать необходимости повторять код, как в следующем случае:

 <script>
    var i=0,c1=0xf80,c2=0xf40,X,n=8; while(n) {
        X=document.createElementNS("http://www.w3.org/2000/svg","text");
        X.setAttribute("x",65-i); X.setAttribute("y",80 i); X.setAttribute("class","txt");
        X.setAttribute("fill","#" (c1.toString(16))); X.innerHTML="e";
        document.rootElement.appendChild(X);
        X=document.createElementNS("http://www.w3.org/2000/svg","text");
        X.setAttribute("x",90-i); X.setAttribute("y",86 i); X.setAttribute("class","txt");
        X.setAttribute("fill","#" (c2.toString(16))); X.innerHTML="f"; 
        document.rootElement.appendChild(X);
        n--; i  ; c1 =16; c2 =16;
    }
</script>

Но если я хочу использовать SVG в качестве фонового изображения, тег по какой-то причине НЕ ВЫПОЛНЯЕТСЯ, что заставляет меня изменить приведенный выше код на что-то глупое, которое выглядит следующим образом:

 <text x="65" y="80" class="txt" fill="#f80">e</text>
<text x="90" y="86" class="txt" fill="#f40">f</text>
<text x="64" y="81" class="txt" fill="#f90">e</text>
<text x="89" y="87" class="txt" fill="#f50">f</text>
<text x="63" y="82" class="txt" fill="#fa0">e</text>
<text x="88" y="88" class="txt" fill="#f60">f</text>
<text x="62" y="83" class="txt" fill="#fb0">e</text>
<text x="87" y="89" class="txt" fill="#f70">f</text>
<text x="61" y="84" class="txt" fill="#fc0">e</text>
<text x="86" y="90" class="txt" fill="#f80">f</text>
<text x="60" y="85" class="txt" fill="#fd0">e</text>
<text x="85" y="91" class="txt" fill="#f90">f</text>
<text x="59" y="86" class="txt" fill="#fe0">e</text>
<text x="84" y="92" class="txt" fill="#fa0">f</text>
<text x="58" y="87" class="txt" fill="#ff0">e</text>
<text x="83" y="93" class="txt" fill="#fb0">f</text>

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

Если кто-нибудь знает способ обработки повторяющихся объектов (или лучше выполнять «циклические» задачи), пожалуйста, дайте мне знать здесь.

Заранее большое спасибо.:)

Комментарии:

1. SVG не запускает скрипт, если вы отображаете его как изображение, то есть через фоновое изображение.

2. Это я видел, но есть ли другой способ (или другой способ написания сценариев) для достижения таких сложных форм для создания SVG в качестве изображения?

3. вы могли бы создать URI данных, а затем использовать его в качестве изображения.