Question

请告诉我是否有更好的方法。

因此，我正在构建一个国际象棋游戏，我想运行一个遍历棋盘的功能，并将所有棋子的图像放置在其起始位置。现在，我在Internet上的某处阅读到了可以引用SVG文件中的id标签的信息。因此，我想将图像保存在变量中，然后引用该文件，然后引用该特定图像，然后将该图像放置在板上。

我尝试查找此文件，并要求我的老师无济于事。

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

我希望碎片的图片出现在板上

Answer 1

到目前为止很好的开始...

由于SVG占位符图像的COR限制，此代码无法在SO上运行，但我想您会明白的。

这是一个对象数组，其中包含URL和要放置SVG图像的元素的while True: try: Primary_Colors = ["red" , "blue" , "Yellow"] Secondary_Colors = ["orange" , "purple" , "green"] print("---------------------------------------------------------------------------------------\n") print("Note: The colors red, blue, and yellow are known as primary colors because they cannot") print("be made by mixing other colors. When you mix primary colors, you get a secondary color. \n") print("---------------------------------------------------------------------------------------\n\n") primary_color1 = input("Please enter your first primary color: ") if primary_color1.lower() not in Primary_Colors: print("Please enter a valid primary color [red, blue, or yellow]. Press any key to start over.\n") input() continue primary_color2 = input("Please enter your second primary color: ") if primary_color2.lower() not in Primary_Colors: print("Please enter a valid primary color. Press any key to start over.") input() continue if primary_color1.lower() == primary_color2.lower(): print("You have already selected this primary color. Press any key to start over.") input() continue print("\n------------------------------------------------------------------------------------") if ((primary_color1.lower() == Primary_Colors[0] and primary_color2.lower() == Primary_Colors[2]) or (primary_color1.lower() == Primary_Colors[2] and primary_color2.lower() == Primary_Colors[0])): secondaryColor = Secondary_Colors[0] elif ((primary_color1.lower() == Primary_Colors[1] and primary_color2.lower() == Primary_Colors[0]) or (primary_color1.lower() == Primary_Colors[0] and primary_color2.lower() == Primary_Colors[1])): secondaryColor = Secondary_Colors[1] elif ((primary_color1.lower() == Primary_Colors[1] and primary_color2.lower() == Primary_Colors[2]) or (primary_color1.lower() == Primary_Colors[2] and primary_color2.lower() == Primary_Colors[1])): secondaryColor = Secondary_Colors[2] print("") print("When you mix ({0:s}) and ({1:s}) you get ({2:s})." .format(primary_color1.capitalize(), primary_color2.capitalize(), secondaryColor.capitalize())) print("\n-------------------------------------------------------------------------------\n") break except ValueError: print("please enter a valid primary color.") continue。这段代码简单地循环遍历图像并将它们显示在适当的位置。

现在要解决有关将其加载到变量等中的问题的另一部分，您可以使用Element的innerHTML即时进行操作。

希望这项帮助对您有帮助。

id

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;
}

Answer 2

请查看以下SVG文件：cat.svg。这将为您提供一个空白屏幕。所有项目都是隐藏的。

但是，如果您在视图源中打开文件，则其内部外观如下：

<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" />

我希望这就是你的要求。

使用多个图像将SVG文件保存到JavaScript中的变量中，并引用每个图像并将其分别附加

2 个答案: