SVG 精灵和视口属性

huangapple
go评论59阅读模式
英文:

SVG sprite and viewbox property

问题

I added the xmlns="http://www.w3.org/2000/svg" attribute to the svg element in the external file, and that solves the problem mentioned above.

英文:

I am trying to create a SVG sprite and to understand how it works.

As I was looking for an example on the Internet, I found this one:
https://codepen.io/jnettik/pen/GRqmbvv
from this website: https://atendesigngroup.com/articles/svg-sprites-embed-flexible-stylable-fast-loading-svg-icons

Let's consider the first icon (email).
On the one hand, we have:

<symbol id="icon--mail" viewBox="0 0 241.061 241.061">

and on the other hand, we have:

<svg class="svg--icon icon--mail" viewBox="0 0 24 24">

Also, from the svg--icon CSS class, we can see that the width of the svg is set to 40px.

I tried:

  • to remove viewBox="0 0 24 24".
    If I do, the email icon is put into a rectangle that is approximately five times its height.

  • to change viewBox="0 0 24 24" to viewBox="0 0 1 1" or viewBox="0 0 10000 10000".
    I doesn't change anything.

Can you explain why:

  • we end up with two viewbox properties per SVG, why one is not enough, what is the purpose of each,

  • these values (0 0 24 24) have been chosen,

  • what do the values 241.061 241.061 correspond to?

I post the code below.
Can someone correct that code by writing the proper viewbox properties values in such a way I understand how it works?

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>SVG sprite viewbox</title>
	
	    <style>
	        *
	        {
	            margin: 0;
	            padding: 0;
	        }
	        
	        img, svg
	        {
	            border: 0;
	            max-width: 100%;
	            height: auto;
	            display: block;
	        }
	    
	        .visually-hidden {
	        display: none;
	        }
	
	        svg {
	        fill: currentColor;
	        }
	
			.svg--icons {
			background-color: palegreen;
			}

			.svg--icon {
			border: solid 1px black;
			}

	        .icon--mail {
	        color: blue;
	        }
	
	        .icon--phone {
	        color: green;
	        }
	
	        .icon--location {
	        color: red;
	        }
	    </style>
	</head>
	<body>
		<div class="svg--icons">
	        <svg class="svg--icon icon--mail" width="40px" viewBox="0 0 24 24">
	        	<use xlink:href="#icon--mail" />
	        </svg>
	      
	        <svg class="svg--icon icon--phone" width="40px" viewBox="0 0 24 24">
	        	<use xlink:href="#icon--phone" />
	        </svg>
	      
	        <svg class="svg--icon icon--location" width="40px" viewBox="0 0 24 24">
	        	<use xlink:href="#icon--location" />
	        </svg>
		</div>
	      	
		<div class="visually-hidden">
			<svg xmlns="http://www.w3.org/2000/svg">
	        
	            <symbol id="icon--mail" viewBox="0 0 241.061 241.061">
	                <path d="M198.602,70.402l-78.063,68.789l-78.08-68.79c-3.109-2.739-7.848-2.438-10.586,0.669c-2.737,3.108-2.439,7.847,0.67,10.586l83.039,73.159c1.417,1.248,3.188,1.872,4.958,1.872s3.542-0.624,4.959-1.873l83.022-73.159c3.107-2.738,3.406-7.478,0.668-10.586C206.449,67.964,201.711,67.664,198.602,70.402z"/>
	                <path d="M218.561,38.529H22.5c-12.406,0-22.5,10.093-22.5,22.5v119.002c0,12.407,10.094,22.5,22.5,22.5h196.061c12.406,0,22.5-10.093,22.5-22.5V61.029C241.061,48.623,230.967,38.529,218.561,38.529z M226.061,180.031c0,4.135-3.364,7.5-7.5,7.5H22.5c-4.136,0-7.5-3.365-7.5-7.5V61.029c0-4.135,3.364-7.5,7.5-7.5h196.061c4.136,0,7.5,3.365,7.5,7.5V180.031z"/>
	            </symbol>
	        
	            <symbol id="icon--phone" viewBox="0 0 211.621 211.621">
	                <path d="M180.948,27.722C163.07,9.844,139.299-0.001,114.017,0c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5c21.276-0.001,41.279,8.284,56.324,23.329c15.046,15.045,23.331,35.049,23.33,56.326c0,4.142,3.357,7.5,7.5,7.5c4.142,0,7.5-3.358,7.5-7.499C208.672,69.371,198.827,45.6,180.948,27.722z"/>
	                <path d="M150.096,94.656c0,4.142,3.358,7.5,7.501,7.499c4.142,0,7.499-3.358,7.499-7.5c-0.002-28.16-22.916-51.073-51.078-51.077c-0.001,0,0,0-0.001,0c-4.142,0-7.499,3.357-7.5,7.499c0,4.142,3.357,7.5,7.499,7.501C133.909,58.581,150.094,74.765,150.096,94.656z"/>
	                <path d="M133.5,132.896c-11.432-0.592-17.256,7.91-20.049,11.994c-2.339,3.419-1.463,8.086,1.956,10.425c3.419,2.339,8.086,1.463,10.425-1.956c3.3-4.825,4.795-5.584,6.823-5.488c6.491,0.763,32.056,19.497,34.616,25.355c0.642,1.725,0.618,3.416-0.071,5.473c-2.684,7.966-7.127,13.564-12.851,16.188c-5.438,2.493-12.105,2.267-19.276-0.651c-26.777-10.914-50.171-26.145-69.531-45.271c-0.008-0.008-0.016-0.015-0.023-0.023c-19.086-19.341-34.289-42.705-45.185-69.441c-2.919-7.177-3.145-13.845-0.652-19.282c2.624-5.724,8.222-10.167,16.181-12.848c2.064-0.692,3.752-0.714,5.461-0.078c5.879,2.569,24.612,28.133,25.368,34.551c0.108,2.104-0.657,3.598-5.478,6.892c-3.42,2.336-4.299,7.003-1.962,10.423c2.336,3.42,7.002,4.298,10.423,1.962c4.086-2.79,12.586-8.598,11.996-20.069C81.021,69.07,57.713,37.339,46.576,33.244c-4.953-1.846-10.163-1.878-15.491-0.09C19.097,37.191,10.439,44.389,6.047,53.969c-4.26,9.294-4.125,20.077,0.395,31.189c11.661,28.612,27.976,53.647,48.491,74.412c0.05,0.051,0.101,0.101,0.153,0.15c20.75,20.477,45.756,36.762,74.33,48.409c5.722,2.327,11.357,3.492,16.746,3.492c5.074,0,9.932-1.032,14.438-3.098c9.581-4.391,16.778-13.048,20.818-25.044c1.784-5.318,1.755-10.526-0.077-15.456C177.232,156.856,145.501,133.548,133.5,132.896z"/>
	            </symbol>
	            
	            <symbol id="icon--location" viewBox="0 0 217.109 217.109">
	                <path d="M108.552,0C62.42,0,24.89,37.535,24.89,83.672c0,32.967,13.802,66.314,39.914,96.437c19.503,22.499,38.831,35.246,39.645,35.778c1.246,0.815,2.675,1.222,4.104,1.222c1.428,0,2.857-0.407,4.104-1.222c0.813-0.532,20.144-13.279,39.647-35.777c26.114-30.124,39.917-63.471,39.917-96.438C192.22,37.535,154.686,0,108.552,0z M108.552,200.4C93.165,188.934,39.89,144.806,39.89,83.672C39.89,45.806,70.691,15,108.552,15c37.864,0,68.668,30.806,68.668,68.672C177.22,144.806,123.94,188.934,108.552,200.4z"/>
	                <path d="M108.557,50.449c-18.31,0-33.206,14.897-33.206,33.209c0,18.307,14.896,33.201,33.206,33.201c18.31,0,33.205-14.894,33.205-33.201C141.762,65.347,126.866,50.449,108.557,50.449z M108.557,101.859c-10.039,0-18.206-8.165-18.206-18.201c0-10.041,8.167-18.209,18.206-18.209c10.038,0,18.205,8.168,18.205,18.209C126.762,93.694,118.595,101.859,108.557,101.859z"/>
	            </symbol>
	        
			</svg>
	      </div>
	</body>
</html>

I removed two SVG images out of three.
I removed the viewBox="0 0 24 24" property from the svg element where it was initially.
I moved the viewbox property that was inside the symbol element inside that svg element.

Here is the code:

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>SVG sprite viewbox</title>
	
	    <style>
	        *
	        {
	            margin: 0;
	            padding: 0;
	        }
	        
	        img, svg
	        {
	            border: 0;
	            max-width: 100%;
	            height: auto;
	            display: block;
	        }
	    
	        .visually-hidden {
	        display: none;
	        }
	
	        svg {
	        fill: currentColor;
	        }
	
			.svg--icons {
			background-color: palegreen;
			}
			.svg--icon {
			border: solid 1px black;
			}
	        .icon--phone {
	        color: green;
	        }
	    </style>
	</head>
	<body>
		<div class="svg--icons">
	        <svg class="svg--icon icon--phone" width="100px" viewBox="0 0 211.621 211.621">
	        	<use xlink:href="#icon--phone" />
	        </svg>	      	      
		</div>
	      	
		<div class="visually-hidden">
			<svg xmlns="http://www.w3.org/2000/svg">
	        
	            <symbol id="icon--phone">
	                <path d="M180.948,27.722C163.07,9.844,139.299-0.001,114.017,0c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5c21.276-0.001,41.279,8.284,56.324,23.329c15.046,15.045,23.331,35.049,23.33,56.326c0,4.142,3.357,7.5,7.5,7.5c4.142,0,7.5-3.358,7.5-7.499C208.672,69.371,198.827,45.6,180.948,27.722z"/>
	                <path d="M150.096,94.656c0,4.142,3.358,7.5,7.501,7.499c4.142,0,7.499-3.358,7.499-7.5c-0.002-28.16-22.916-51.073-51.078-51.077c-0.001,0,0,0-0.001,0c-4.142,0-7.499,3.357-7.5,7.499c0,4.142,3.357,7.5,7.499,7.501C133.909,58.581,150.094,74.765,150.096,94.656z"/>
	                <path d="M133.5,132.896c-11.432-0.592-17.256,7.91-20.049,11.994c-2.339,3.419-1.463,8.086,1.956,10.425c3.419,2.339,8.086,1.463,10.425-1.956c3.3-4.825,4.795-5.584,6.823-5.488c6.491,0.763,32.056,19.497,34.616,25.355c0.642,1.725,0.618,3.416-0.071,5.473c-2.684,7.966-7.127,13.564-12.851,16.188c-5.438,2.493-12.105,2.267-19.276-0.651c-26.777-10.914-50.171-26.145-69.531-45.271c-0.008-0.008-0.016-0.015-0.023-0.023c-19.086-19.341-34.289-42.705-45.185-69.441c-2.919-7.177-3.145-13.845-0.652-19.282c2.624-5.724,8.222-10.167,16.181-12.848c2.064-0.692,3.752-0.714,5.461-0.078c5.879,2.569,24.612,28.133,25.368,34.551c0.108,2.104-0.657,3.598-5.478,6.892c-3.42,2.336-4.299,7.003-1.962,10.423c2.336,3.42,7.002,4.298,10.423,1.962c4.086-2.79,12.586-8.598,11.996-20.069C81.021,69.07,57.713,37.339,46.576,33.244c-4.953-1.846-10.163-1.878-15.491-0.09C19.097,37.191,10.439,44.389,6.047,53.969c-4.26,9.294-4.125,20.077,0.395,31.189c11.661,28.612,27.976,53.647,48.491,74.412c0.05,0.051,0.101,0.101,0.153,0.15c20.75,20.477,45.756,36.762,74.33,48.409c5.722,2.327,11.357,3.492,16.746,3.492c5.074,0,9.932-1.032,14.438-3.098c9.581-4.391,16.778-13.048,20.818-25.044c1.784-5.318,1.755-10.526-0.077-15.456C177.232,156.856,145.501,133.548,133.5,132.896z"/>
	            </symbol>
	        
			</svg>
	      </div>
	</body>
</html>

I was trying to explain what the values (211.621, 211.621) exactly are...
Here is my try:
The values (211.621, 211.621) are the values that ensure the SVG image (whatever its width in pixels may be) can be seen in its entirety at the size that corresponds to the chosen dimensions, perfectly centered, with no padding.

I created a SVG sprite file which contents are:

<svg width="0" height="0" fill="none" style="visibility: hidden; position: absolute;" aria-hidden="true">
	<symbol id="icon--phone">
	    <path d="M180.948,27.722C163.07,9.844,139.299-0.001,114.017,0c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5c21.276-0.001,41.279,8.284,56.324,23.329c15.046,15.045,23.331,35.049,23.33,56.326c0,4.142,3.357,7.5,7.5,7.5c4.142,0,7.5-3.358,7.5-7.499C208.672,69.371,198.827,45.6,180.948,27.722z"/>
	    <path d="M150.096,94.656c0,4.142,3.358,7.5,7.501,7.499c4.142,0,7.499-3.358,7.499-7.5c-0.002-28.16-22.916-51.073-51.078-51.077c-0.001,0,0,0-0.001,0c-4.142,0-7.499,3.357-7.5,7.499c0,4.142,3.357,7.5,7.499,7.501C133.909,58.581,150.094,74.765,150.096,94.656z"/>
	    <path d="M133.5,132.896c-11.432-0.592-17.256,7.91-20.049,11.994c-2.339,3.419-1.463,8.086,1.956,10.425c3.419,2.339,8.086,1.463,10.425-1.956c3.3-4.825,4.795-5.584,6.823-5.488c6.491,0.763,32.056,19.497,34.616,25.355c0.642,1.725,0.618,3.416-0.071,5.473c-2.684,7.966-7.127,13.564-12.851,16.188c-5.438,2.493-12.105,2.267-19.276-0.651c-26.777-10.914-50.171-26.145-69.531-45.271c-0.008-0.008-0.016-0.015-0.023-0.023c-19.086-19.341-34.289-42.705-45.185-69.441c-2.919-7.177-3.145-13.845-0.652-19.282c2.624-5.724,8.222-10.167,16.181-12.848c2.064-0.692,3.752-0.714,5.461-0.078c5.879,2.569,24.612,28.133,25.368,34.551c0.108,2.104-0.657,3.598-5.478,6.892c-3.42,2.336-4.299,7.003-1.962,10.423c2.336,3.42,7.002,4.298,10.423,1.962c4.086-2.79,12.586-8.598,11.996-20.069C81.021,69.07,57.713,37.339,46.576,33.244c-4.953-1.846-10.163-1.878-15.491-0.09C19.097,37.191,10.439,44.389,6.047,53.969c-4.26,9.294-4.125,20.077,0.395,31.189c11.661,28.612,27.976,53.647,48.491,74.412c0.05,0.051,0.101,0.101,0.153,0.15c20.75,20.477,45.756,36.762,74.33,48.409c5.722,2.327,11.357,3.492,16.746,3.492c5.074,0,9.932-1.032,14.438-3.098c9.581-4.391,16.778-13.048,20.818-25.044c1.784-5.318,1.755-10.526-0.077-15.456C177.232,156.856,145.501,133.548,133.5,132.896z"/>
	</symbol>
</svg>

I modified the HTML code accordingly:

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Z4</title>
	
	    <style>
	        *
	        {
	            margin: 0;
	            padding: 0;
	        }
	        
	        img, svg
	        {
	            border: 0;
	            max-width: 100%;
	            height: auto;
	            display: block;
	        }
	    
	        .visually-hidden {
	        display: none;
	        }
	
	        svg {
	        fill: currentColor;
	        }
	
		    .svg--icons {
		    background-color: palegreen;
		    }
		    .svg--icon {
		    border: solid 1px black;
		    }
	        .icon--phone {
	        color: green;
	        }
	    </style>
	</head>
	<body>
		<div class="svg--icons">
			<svg class="svg--icon icon--phone" width="100px" viewBox="0 0 211.621 211.621">
	        		<use xlink:href="svg/svg_sprite_example.svg#icon--phone" />
	        	</svg>	      	      
		</div>	
 	</body>
</html>

When I visit the HTML page, the image doesn't appear.
Can you see what's wrong?

I added the xmlns="http://www.w3.org/2000/svg" attribute to the svg element in the external file and that solves the problem mentioned above.

答案1

得分: 1

以下是要解释的几个事项。首先，如果我们省略SVG的viewBox、width和height属性，它将采用默认大小为300x150。这可能会有些欺骗性，记住这一点。以下是一个示例：

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->
.container {
  width: 200px;
  height: 200px;
  border: thin solid black;
}

<!-- language: lang-html -->
<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="orange"/>
  </svg>
</div>

<!-- end snippet -->

如果我们在这个简单的SVG上引入viewBox属性，您会看到使用0 0 100 100和0 0 10 10没有区别。这是因为SVG始终会尝试占用尽可能多的空间——默认情况下宽度为100%（第一个示例除外）。这就是为什么您会发现在viewBox中写什么都没有关系，它看起来都一样（现在，内容（例如在您的情况下的<use>元素）也会填充容器）。以下是具有不同viewBox值的两个示例以及一个示例，用于展示当我们为SVG指定宽度时会发生什么：

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->
body {
  display: flex;
  gap: 5px;
}

.container {
  width: 200px;
  height: 200px;
  border: thin solid black;
}

<!-- language: lang-html -->
<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect width="100%" height="100%" fill="orange"/>
  </svg>
</div>

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
    <rect width="100%" height="100%" fill="MediumSeaGreen"/>
  </svg>
</div>

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="160">
    <rect width="100%" height="100%" fill="Coral"/>
  </svg>
</div>

<!-- end snippet -->

现在来解答关于符号的问题。对于符号（以及一般的SVG元素），viewBox属性用于定义内部坐标系统。因此，viewBox的大小需要适应具有viewBox属性的元素内部的元素的大小。以下是两个具有相同路径元素的示例。它适用于第一个SVG，但不适用于第二个：

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->
body {
  display: flex;
  gap: 5px;
}

.container {
  width: 200px;
  height: 200px;
  border: thin solid black;
}

<!-- language: lang-html -->
<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M 5 5 H 95 C 75 40 75 60 95 95 C 40 95 5 50 5 5" fill="orange"/>
  </svg>
</div>

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <path d="M 5 5 H 95 C 75 40 75 60 95 95 C 40 95 5 50 5 5" fill="MediumSeaGreen"/>
  </svg>
</div>

<!-- end snippet -->

所以，现在我们可以将所有这些结合起来。您有一个带有viewBox属性但没有宽度和高度的符号。因此，它将始终填充容器元素，也就是在您的情况下包含use元素的SVG元素。符号的viewBox值反映了所包含形状的大小。

因此，在这种特定情况下，为SVG定义的viewBox可以是任意的数字（只要保持正确的纵横比）。这是下面的第一个示例。如果为符号或SVG元素之一指定了宽度和/或高度，可能会“搞乱”一些东西。通常最好的做法是将它们留空，让一些包含元素的CSS控制大小。另一方面，如果删除了viewBox属性，内部坐标系统将开始反映上下文。这就是在第二个示例中发生的情况，其中形状的宽度将为90px，因为路径中的数字现在对应于HTML页面中的像素大小。

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->
body {
  display: flex;
  gap: 5px;
}

.container {
  width: 200px;
  height: 200px;
  border: thin solid black;
}

<!-- language: lang-html -->
<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
    <use href="#S01"/>
  </svg>
</div>

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg">
    <use href="#S02"/>
  </svg>
</div>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"
  style="visibility: hidden; position: absolute;">
  <symbol id="S01" viewBox="0 0 100 100">
    <path d="M 5 5 H 95 C 75 40 75 60 95 95 C 40 95 5 50 5 5" fill="orange"/>
  </symbol>
  <symbol id="S02">
    <path d="M 5 5 H 95 C 75 40 75 60 95 95 C 40 95 5 50 5 5" fill="MediumSea

<details>
<summary>英文:</summary>

There are a couple of things to explain here. First of all if we leave out the viewBox, width and height attributes of an SVG it will get the default size of 300x150. This can cheat a bit, so keep that in mind. Here is an example:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .container {
      width: 200px;
      height: 200px;
      border: thin solid black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
        &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;orange&quot;/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

If we introduce the viewBox attribute on this simple SVG, you can see that there is no difference between using `0 0 100 100` and `0 0 10 10`. That is because the SVG will always try to take up as much space as possible -- it is 100% in width by default (except for the first example). That is why you experience that it doesn&#39;t matter what you write in the viewBox, it looks the same (now, that the content (`&lt;use&gt;` in you case) also will fill up the container). Two examples with different viewBox values and one just to show what happens when we give the SVG a width:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      display: flex;
      gap: 5px;
    }

    .container {
      width: 200px;
      height: 200px;
      border: thin solid black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 100&quot;&gt;
        &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;orange&quot;/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 10 10&quot;&gt;
        &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;MediumSeaGreen&quot;/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 10 10&quot; width=&quot;160&quot;&gt;
        &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;Coral&quot;/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

Now to the question about the symbol. In the case of the symbol (and in general SVG elements) the viewBox attribute is used for defining the inner coordinate system. So the size of the viewBox needs to fit the size of the elements that are inside that element with the viewBox attribute. Here are two examples with the same path element. It fits the first SVG, not the second:

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      display: flex;
      gap: 5px;
    }

    .container {
      width: 200px;
      height: 200px;
      border: thin solid black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 100&quot;&gt;
        &lt;path d=&quot;M 5 5 H 95 C 75 40 75 60 95 95 C 40 95 5 50 5 5&quot; fill=&quot;orange&quot;/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 50 50&quot;&gt;
        &lt;path d=&quot;M 5 5 H 95 C 75 40 75 60 95 95 C 40 95 5 50 5 5&quot; fill=&quot;MediumSeaGreen&quot;/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

So, now we can combine it all. You have a symbol width a viewBox attribute and no width and height. Thus, it will always fill up the container element, in your case the SVG element that contains the use element. The value of the viewBox for the symbol reflects the size of the contained shapes.

So, in this specific situation the viewBox defined for the SVG can have arbitrary numbers (as long as you keep to the right aspect ratio). That is the following first example. If you specify width and/or height for either the symbol or the SVG element this can &quot;mess up&quot; something. Often it is a good idea to just to leave them out and let some CSS for containing elements control the sizes. If on the other hand you remove the viewBox attribute, the inner coordinate system will start to reflect the context. This is what happens in the second example where the shape will be 90px in width, because the numbers in the path are now corresponding to the pixel size in the HTML page.

&lt;!-- begin snippet: js hide: true console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      display: flex;
      gap: 5px;
    }

    .container {
      width: 200px;
      height: 200px;
      border: thin solid black;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 10 10&quot;&gt;
        &lt;use href=&quot;#S01&quot;/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
        &lt;use href=&quot;#S02&quot;/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;

    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;0&quot; height=&quot;0&quot;
      style=&quot;visibility: hidden; position: absolute;&quot;&gt;
      &lt;symbol id=&quot;S01&quot; viewBox=&quot;0 0 100 100&quot;&gt;
        &lt;path d=&quot;M 5 5 H 95 C 75 40 75 60 95 95 C 40 95 5 50 5 5&quot; fill=&quot;orange&quot;/&gt;
      &lt;/symbol&gt;
      &lt;symbol id=&quot;S02&quot;&gt;
        &lt;path d=&quot;M 5 5 H 95 C 75 40 75 60 95 95 C 40 95 5 50 5 5&quot; fill=&quot;MediumSeaGreen&quot;/&gt;
      &lt;/symbol&gt;
    &lt;/svg&gt;

&lt;!-- end snippet --&gt;



</details>

huangapple
  • 本文由 发表于 2023年8月4日 00:34:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76830036.html
  • sprite
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定