主页 / 问题 / 1110133
Accepted
word
Asked:2020-04-14 17:34:57 +0800 CST2020-04-14 17:34:57 +0800 CST

更改 SVG 代码时，使用 <defs> 部分中的 <use> 克隆时，图标不可见

  • 772

图标有一个svg代码，需要横向复制一份。
我怎样才能做到这一点？现在，当您在屏幕上打开图标时，没有图标。
那些。我对通过svg标签的方法感兴趣，例如使用标签use xlink:href 

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="24" viewBox="60 0 24 24" >
<style type="text/css">
	.st0{fill:#000000;}
</style>
<defs>
<path id="star" class="st0" d="M800,318.1C624.6,318.1,481.9,175.4,481.9,0h-30.4H348.5h-30.4c0,175.4-142.7,318.1-318.1,318.1v30.4
	c0,0,0,0,0,0v133.3c175.4,0,318.1,142.7,318.1,318.1h30.4h102.9h30.4c0-175.4,142.7-318.1,318.1-318.1v-30.4c0,0,0,0,0,0V318.1z
	 M400,590.8C357.3,509.5,290.5,442.7,209.2,400c81.3-42.7,148.1-109.5,190.8-190.8c42.7,81.3,109.5,148.1,190.8,190.8
	C509.5,442.7,442.7,509.5,400,590.8z"/>
</defs>
<use  xlink:href="#star" x="10" y="0"  />
<use  xlink:href="#star" x="35" y="0"  />
</svg>

也如此处： 

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="24" viewBox="60 0 24 24" >
<style type="text/css">
.st0{fill:gold;}
</style>
<defs>
<path id="star" class="st0" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
</defs>
<use  xlink:href="#star" x="10" y="0"  />
<use  xlink:href="#star" x="35" y="0"  />
<use  xlink:href="#star" x="60" y="0"  /> 
<use  xlink:href="#star" x="85" y="0"  />
<use  xlink:href="#star" x="110" y="0"  />
</svg>

PS
原创

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#000000;}
</style>
<g>
	<path class="st0" d="M496.2,800H303.8v-18c0-157.6-128.2-285.8-285.8-285.8H0V303.8h18c157.6,0,285.8-128.2,285.8-285.8V0h192.3v18
		c0,157.6,128.2,285.8,285.8,285.8h18v192.4h-18c-157.6,0-285.8,128.2-285.8,285.8V800z M339.4,764h121.3
		c9-163.1,140.2-294.3,303.3-303.3V339.4c-163.2-9-294.3-140.2-303.3-303.3H339.4c-9,163.2-140.2,294.3-303.3,303.3v121.3
		C199.2,469.7,330.3,600.8,339.4,764z M400,621.6l-15.9-30.4c-39.4-75.3-100-135.8-175.2-175.2l-30.5-16l30.5-16
		c75.2-39.3,135.8-99.9,175.2-175.2l15.9-30.5l16,30.5c39.4,75.2,100,135.8,175.2,175.2l30.5,16l-30.5,16
		c-75.2,39.4-135.8,100-175.2,175.2L400,621.6z M253.6,400c59.7,36.8,109.5,86.7,146.4,146.4c36.8-59.7,86.7-109.6,146.4-146.4
		c-59.7-36.8-109.6-86.7-146.4-146.4C363.1,313.3,313.3,363.2,253.6,400z"/>
</g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="24" viewBox="60 0 24 24">
<style type="text/css">
	.st1{fill:#000000;}
</style>
<defs>
<g>
<path id="star" class="st1"  d="M496.2,800H303.8v-18c0-157.6-128.2-285.8-285.8-285.8H0V303.8h18c157.6,0,285.8-128.2,285.8-285.8V0h192.3v18
		c0,157.6,128.2,285.8,285.8,285.8h18v192.4h-18c-157.6,0-285.8,128.2-285.8,285.8V800z M339.4,764h121.3
		c9-163.1,140.2-294.3,303.3-303.3V339.4c-163.2-9-294.3-140.2-303.3-303.3H339.4c-9,163.2-140.2,294.3-303.3,303.3v121.3
		C199.2,469.7,330.3,600.8,339.4,764z M400,621.6l-15.9-30.4c-39.4-75.3-100-135.8-175.2-175.2l-30.5-16l30.5-16
		c75.2-39.3,135.8-99.9,175.2-175.2l15.9-30.5l16,30.5c39.4,75.2,100,135.8,175.2,175.2l30.5,16l-30.5,16
		c-75.2,39.4-135.8,100-175.2,175.2L400,621.6z M253.6,400c59.7,36.8,109.5,86.7,146.4,146.4c36.8-59.7,86.7-109.6,146.4-146.4
		c-59.7-36.8-109.6-86.7-146.4-146.4C363.1,313.3,313.3,363.2,253.6,400z"/>
</g>
</defs>
<use  xlink:href="#star" x="0" y="0"  />
<use  xlink:href="#star" x="30" y="0"  />
<use  xlink:href="#star" x="60" y="0"  />
<use  xlink:href="#star" x="90" y="0"  />
<use  xlink:href="#star" x="120" y="0"  />
</svg>

css

3 个回答

  1. 或多或少像这样

    从 M800 的第一个坐标来看，我假设图标在 viewBox 之外很远，我将它设置为 0 0 800 800，然后偏移了 100

    嗯，当然是删太多了，代码变短了

    在 SVG2:0 xlink 中 - 已弃用

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4400 800" width="300">
<defs>
  <path id="star"  d="M800,318.1C624.6,318.1,481.9,175.4,481.9,0h-30.4H348.5h-30.4c0,175.4-142.7,318.1-318.1,318.1v30.4c0,0,0,0,0,0v133.3c175.4,0,318.1,142.7,318.1,318.1h30.4h102.9h30.4c0-175.4,142.7-318.1,318.1-318.1v-30.4c0,0,0,0,0,0V318.1zM400,590.8C357.3,509.5,290.5,442.7,209.2,400c81.3-42.7,148.1-109.5,190.8-190.8c42.7,81.3,109.5,148.1,190.8,190.8
	C509.5,442.7,442.7,509.5,400,590.8z" fill="#000"/></defs>

  <use href="#star" x="0" y="0" width="100px" />
  <use href="#star" x="900" y="0" width="100px" />
  <use href="#star" x="1800" y="0" width="100px" />
  <use href="#star" x="2700" y="0" width="100px" />
  <use href="#star" x="3600" y="0" width="100px" />
</svg>

    • 3
  2. Best Answer

    如果 svg 元素不可见，您必须首先将文件加载到矢量编辑器中，这将帮助您查看原因

    在此处输入图像描述

    现在很清楚为什么该元素不可见 - 它首先位于 SVG 文档之外，并且比它大得多，大小为 800 x 800 像素。

    要将这个元素添加到现有的 SVG 文档中，您需要减少它

    800 / 24 = 33,33 раза我们将它减少 34 倍，以便文档边缘的缩进最小。

    减少是用命令完成的transform="scale(0.029)"

    1 / 34 = 0.029 

    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="24" viewBox="60 0 24 24" style="border:1px solid" >
<style type="text/css">
	.st0{fill:#000000;}
</style>
<defs>
<path id="star" class="st0" transform="scale(0.029)" d="M800,318.1C624.6,318.1,481.9,175.4,481.9,0h-30.4H348.5h-30.4c0,175.4-142.7,318.1-318.1,318.1v30.4
	c0,0,0,0,0,0v133.3c175.4,0,318.1,142.7,318.1,318.1h30.4h102.9h30.4c0-175.4,142.7-318.1,318.1-318.1v-30.4c0,0,0,0,0,0V318.1z
	 M400,590.8C357.3,509.5,290.5,442.7,209.2,400c81.3-42.7,148.1-109.5,190.8-190.8c42.7,81.3,109.5,148.1,190.8,190.8
	C509.5,442.7,442.7,509.5,400,590.8z"/>
</defs>
<use  xlink:href="#star" x="15" y="0"  />
<use  xlink:href="#star" x="45" y="0"  />
</svg>

    可以使用x=45命令中的参数更改元素之间的距离<use>

    更新

    不用矢量编辑器也可以使用 JS 方法找出 SVG 对象的位置和大小getBBox()

    let bb = star.getBBox();
 console.log(bb.width);
 console.log(bb.height);


    let bb = star.getBBox();
 console.log(bb.width);
 console.log(bb.height);
    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="24" viewBox="60 0 24 24"  >
<style type="text/css">
	.st0{fill:#000000;}
</style>
<defs>
<path id="star" class="st0" transform="scale(0.029)" d="M800,318.1C624.6,318.1,481.9,175.4,481.9,0h-30.4H348.5h-30.4c0,175.4-142.7,318.1-318.1,318.1v30.4
	c0,0,0,0,0,0v133.3c175.4,0,318.1,142.7,318.1,318.1h30.4h102.9h30.4c0-175.4,142.7-318.1,318.1-318.1v-30.4c0,0,0,0,0,0V318.1z
	 M400,590.8C357.3,509.5,290.5,442.7,209.2,400c81.3-42.7,148.1-109.5,190.8-190.8c42.7,81.3,109.5,148.1,190.8,190.8
	C509.5,442.7,442.7,509.5,400,590.8z"/>
</defs>
<use  xlink:href="#star" x="15" y="0"  />
<use  xlink:href="#star" x="45" y="0"  />
</svg>

    • 2

  3. 从“PS original”下面的问题中回答第二个代码示例

    查看您的代码在矢量编辑器中的样子

    错误与问题的第一部分相同。您正在 svg 文档之外绘制形状（它是一个灰色框），而不是按照您想要的比例。

    因此，当您将 Shape 的 SVG 代码复制到文档的 SVG 代码中时，您将看不到该形状，因为它位于 SVG 文档之外并且比它大得多。

    直接在 svg 文档内绘制（图中的灰色矩形）会更正确。在这个矩形内

    然后在输出处，您将收到一个将立即显示的代码。

    在此处输入图像描述

    当然，我现在将进行操作以减小 svg 形状，它将落入 SVG 文档中。

    您的身材的大小800 х 800px，因此，与第一个答案一样，我们缩小了身材

    <path id="star" class="st1" transform="scale(0.029)" 

    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="24" viewBox="60 0 24 24">
<style type="text/css">
	.st1{fill:red;}
</style>
<defs>
<g>
<path id="star" class="st1" transform="scale(0.029)" d="M496.2,800H303.8v-18c0-157.6-128.2-285.8-285.8-285.8H0V303.8h18c157.6,0,285.8-128.2,285.8-285.8V0h192.3v18
		c0,157.6,128.2,285.8,285.8,285.8h18v192.4h-18c-157.6,0-285.8,128.2-285.8,285.8V800z M339.4,764h121.3
		c9-163.1,140.2-294.3,303.3-303.3V339.4c-163.2-9-294.3-140.2-303.3-303.3H339.4c-9,163.2-140.2,294.3-303.3,303.3v121.3
		C199.2,469.7,330.3,600.8,339.4,764z M400,621.6l-15.9-30.4c-39.4-75.3-100-135.8-175.2-175.2l-30.5-16l30.5-16
		c75.2-39.3,135.8-99.9,175.2-175.2l15.9-30.5l16,30.5c39.4,75.2,100,135.8,175.2,175.2l30.5,16l-30.5,16
		c-75.2,39.4-135.8,100-175.2,175.2L400,621.6z M253.6,400c59.7,36.8,109.5,86.7,146.4,146.4c36.8-59.7,86.7-109.6,146.4-146.4
		c-59.7-36.8-109.6-86.7-146.4-146.4C363.1,313.3,313.3,363.2,253.6,400z"/>
</g>
</defs>
<use  xlink:href="#star" x="0" y="0"  />
<use  xlink:href="#star" x="30" y="0"  />
<use  xlink:href="#star" x="60" y="0"  />
<use  xlink:href="#star" x="90" y="0"  />
<use  xlink:href="#star" x="120" y="0"  />
</svg>

    • 1

相关问题