Сохранение файла SVG в переменную в JavaScript с несколькими изображениями и ссылками на каждое изображение и добавление их по отдельности - PullRequest
Новая
       12

Сохранение файла SVG в переменную в JavaScript с несколькими изображениями и ссылками на каждое изображение и добавление их по отдельности

0 голосов
/ 05 февраля 2019

Скажите, пожалуйста, есть ли лучший способ сделать это.

Итак, я строю игру в шахматы и хочу запустить функцию, которая проходит по доске и размещает все изображения для фигур вих стартовые места.Сейчас я прочитал это где-то в интернете, чтобы я мог ссылаться на тег id в файле SVG.Поэтому я хочу сохранить изображение в переменной, затем обратиться к этому файлу, а затем сослаться на это конкретное изображение, а затем поместить это изображение на доску.

Я попытался найти его и попросить своих учителей безрезультатно.

https://repl.it/@DangeloS/WoefulMetallicKeyboard

Я хочу, чтобы на доске появлялись изображения фигур

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

Пожалуйста, посмотрите на этот файл SVG: cat.svg .Это даст вам пустой экран.Все предметы спрятаны.

Однако, если вы откроете файл в view-source, он будет выглядеть так: 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"  viewBox="0 0 225 225">

<style type="text/css">
 <![CDATA[  
    svg > svg:not(:target) {
    display: none;
    }
     ]]> 
</style>
<desc>
<g id="cat">
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M121.506 ... 108.953z"/>
<path id="head" fill-rule="evenodd" clip-rule="evenodd" d="M129.747,18.651 ... 81.453z"/>
</g>
</desc>
<svg version="1.1" id="blackcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="black" />
</svg>
<svg version="1.1" id="redcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="red" />
</svg>

</svg>

Внутри у вас есть два других элемента svg с id каждый.В CSS (это важно) все элементы svg внутри основного svg имеют display:none, если только этот элемент не является целью.Например, это нацеливание на рыжего кота: src="https://path/cat.svg#redcat"

Если вы хотите увидеть рыжего кота, вы можете сделать это: 

<img width="50" height ="50" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat" />

Надеюсь, это то, о чем вы спрашивали.

0 голосов
/ 05 февраля 2019

Отличное начало ...

Этот код не будет работать на SO из-за ограничений CORs для изображений-заполнителей SVG, но я думаю, вы поймете идею.

Вот массив объектов, содержащий URL и id элемента для размещения изображения SVG.Этот код просто перебирает изображения и отображает их в соответствующем месте.

Теперь, чтобы ответить на другую часть вашего вопроса о загрузке этого в переменные и т. Д., Вы можете сделать это на лету, используя innerHTML элемента.

Надеюсь, что эта помощь и удачи вам. 

let svgCollection = [{
  url: "https://placeholder.pics/svg/150",
  placement: 'spot1'
}, {
  url: "https://placeholder.pics/svg/150",
  placement: 'spot2'
}];

$.each(svgCollection, (svg) => {
  $.get(svg.url, function(data) {
    $(svg.placement).append(data["documentElement"]);
  })
});
#spot2 {
  border: 1px red solid;
  width: 150px;
  height: 150px;
}

#spot1 {
  border: 1px green solid;
  width: 150px;
  height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="spot1">&nbsp;</div>
<div id="spot2">&nbsp;</div>
...