使用中心对齐嵌套 SVG答案

【问题标题】：Nesting SVGs with center alignment使用中心对齐嵌套 SVG
【发布时间】：2019-06-02 22:55:03
【问题描述】：

我需要将随机形状（即不一定是方形）的图标 SVG 放在图钉/标记 SVG 的顶部。

我可以轻松地将它们堆叠起来，但我不确定如何对齐它们，因此无论形状如何，图标都是垂直和水平对齐的。

标记 SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="45">
      <defs>
        <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
          <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
        </filter>
      </defs>
      <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
        <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
        <path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
      </g>
    </svg>

图标 SVG：

  &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;&lt;title&gt;bicycle&lt;/title&gt;&lt;path d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/&gt;&lt;/svg&gt;

堆叠（不正确对齐）：

  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="45">
      <defs>
        <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
          <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
        </filter>
      </defs>
      <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
        <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
        <path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
        <g fill="#FFF" fill-rule="nonzero">
          <path d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/>
        </g>
      </g>
    </svg>

【问题讨论】：

标签： css svg vector

【解决方案1】：

这很简单。

只需将您的 <svg> 图标嵌入到另一个 SVG 中。将嵌入的<svg> 元素的x、y、width 和height 设置为您希望图标放置在其中的方形区域的大小和位置。剩下的工作由 SVG 完成（包括居中）。

在这种情况下，我选择了一个正方形：x="6" y="6" width="20" height="20"。

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="45">
  <defs>
    <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
    </filter>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
    <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
    <path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
  </g>

  <svg x="6" y="6" width="20" height="20" viewBox="0 0 24 24" fill="#fff"><title>bicycle</title><path d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/></svg>

</svg>

【讨论】：

毫无疑问，它非常简单（AndroidSVG 的作者！）：D 谢谢！

【解决方案2】：

Answer @Paul LeBeau 的独创性不错，可惜用这个解决方案，组合图标只能使用一次。
因为图标的不同部分位于svg的不同实例中

假设您需要多次使用组合图标作为地图指针。
然后，您必须使用另一种解决方案来相对于彼此定位图标的组件。

这可以使用命令transform ="translate (2.5 2)"来完成

将栅格地图添加到 svg

<image xlink:href="https://i.stack.imgur.com/ylp6r.png" width="100%" height="100%" />

在地图上克隆并同时定位图标

<use x="300" y="110" xlink:href="#bicicle" />

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 960 761">
   
   <image xlink:href="https://i.stack.imgur.com/ylp6r.png" width="100%" height="100%" /> 
  <defs>
    <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
          <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
        </filter>
  <g id="bicycle">
     <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
      <path fill="#006893" fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
    
      <path transform="translate(2.5 2)" fill="#fff" d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/>
    
  </g>
  </defs>  
     <use x="300" y="110" xlink:href="#bicycle" />
	  <use x="650" y="200" xlink:href="#bicycle" />
	   <use x="650" y="450" xlink:href="#bicycle" />
		 <use x="150" y="250" xlink:href="#bicycle" />   
</svg>

更新

克隆图标时，可以设置样式。

为此，删除父级的fill ="#006893"属性，并为子级绘制不同的颜色

<use x="300" y="110" fill="red" xlink:href="#bicycle" />

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 960 761">
   
   <image xlink:href="https://i.stack.imgur.com/ylp6r.png" width="100%" height="100%" /> 
  <defs>
    <filter id="a" width="154.5%" height="509.1%" x="-27.3%" y="-204.5%" filterUnits="objectBoundingBox">
          <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
        </filter>
  <g id="bicycle">
     <ellipse cx="15" cy="37.467" fill="#999" fill-opacity=".9" filter="url(#a)" rx="11" ry="1.467"/>
      <path  fill-rule="nonzero" stroke="#006893" d="M15 0C6.448 0 0 6.759 0 15.726c0 11.28 13.944 21.44 14.537 21.867.138.1.302.149.463.149a.784.784 0 0 0 .463-.15C16.055 37.167 30 27.007 30 15.727 30 6.76 23.552 0 15 0z"/>
    
      <path transform="translate(2.5 2)" fill="#fff" d="M5.5,6.137a1,1,0,0,0,0,2H6.909a.249.249,0,0,1,.231.156l.637,1.568a.251.251,0,0,1-.036.25l-.35.437a.25.25,0,0,1-.3.07A4.894,4.894,0,0,0,5,10.137a5,5,0,1,0,4.856,6.19.25.25,0,0,1,.243-.19h.4a1,1,0,0,0,.807-.409l4.281-5.837a.247.247,0,0,1,.236-.1.252.252,0,0,1,.2.161l.281.762a.251.251,0,0,1-.095.293,4.978,4.978,0,1,0,2.79-.87,3.824,3.824,0,0,0-.549.046.25.25,0,0,1-.27-.161L16.92,6.6a.249.249,0,0,1,.174-.329l1.742-.435a1,1,0,0,0-.485-1.941L15.8,4.532a1.5,1.5,0,0,0-1.042,1.974l.08.217a.253.253,0,0,1-.008.193.25.25,0,0,1-.142.129L9.764,8.8a.251.251,0,0,1-.316-.141l-.113-.279A.178.178,0,0,1,9.5,8.137a1,1,0,0,0,0-2Zm-.5,12a3,3,0,1,1,2.658-4.364.25.25,0,0,1-.222.364H5a1,1,0,0,0,0,2H7.436a.25.25,0,0,1,.222.364A2.985,2.985,0,0,1,5,18.137Zm5.049-4.076a.1.1,0,0,1-.174-.036,4.941,4.941,0,0,0-.927-1.916.249.249,0,0,1,0-.309l.609-.761a.252.252,0,0,1,.111-.08L12.5,9.95a.25.25,0,0,1,.286.383ZM19,18.137a3,3,0,0,1-3-3,2.959,2.959,0,0,1,.8-2.022.249.249,0,0,1,.417.084l.842,2.284a1,1,0,1,0,1.876-.692l-.964-2.617a.028.028,0,0,1,0-.025A.028.028,0,0,1,19,12.137a3,3,0,0,1,0,6Z"/>
    
  </g>
  </defs>  
     <use x="300" y="110" fill="red" xlink:href="#bicycle" />
	  <use x="650" y="200" fill="dodgerblue" xlink:href="#bicycle" />
	   <use x="650" y="450" fill="purple" xlink:href="#bicycle" />
		 <use x="150" y="250" fill="green" xlink:href="#bicycle" />   
</svg>

【讨论】：

对不起，我不太明白为什么“组合图标只能使用一次”？一旦我将组合文件保存为 SVG，它是否包含多个嵌套的 SVG 是否重要？
@3zzy 你是对的，但前提是对于相同图标的每个副本使用相同文件的副本，这是不合理的。我建议了一种方法，您可以在同一个 svg 文件中克隆和定位任意数量的相同图标。我不坚持我的决定选择是你的