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

1

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

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

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

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

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

Теги:
svg
chess

2 ответа

0

Пожалуйста, взгляните на этот файл 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 с идентификатором каждый. В 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

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

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

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

Теперь, чтобы ответить на другую часть вашего вопроса о загрузке этого в переменные и т.д., Вы можете сделать это на лету, используя Element 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>
Поделиться
  • 0
    Ну, что ТАК и CORS. И вы говорите, что у меня должны быть отдельные файлы изображений вместо 1? Я не совсем понимаю, о чем ты говоришь, или, может быть, я просто слишком много думаю.
  • 0
    не хотел говорить мимо тебя. SO = Stackoverflow; Я имел в виду, что приведенный выше код не будет работать на этом сайте, но будет хорошо работать в вашем коде. Название вашего поста гласит «несколько изображений», а ваш вопрос касается «всех изображений», а вы «создаете игру в шахматы» - так что да, ладья отличается от пешки визуально. Что означает разные файлы SVG. Но, возможно, я неправильно понял ваш смысл.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню