能否将多个SVG与不同的视口组合起来，并在Polymer中自定义每个SVG？

我想在我的应用程序中使用多个svg，并希望将它们放在单个自定义svg元素中，以按id分别引用，但是，视口是不同的。一个svg定义为

<iron-iconset-svg name="club-icon" size="512">
    <svg>
        <defs>
            <g id="club-icon">
                <path d="bunch of numbers"></path>
            </g>
        </defs>
    </svg>
</iron-iconset-svg>

<iron-iconset-svg name="club-icon" size="300">
    <svg>
        <defs>
            <g id="book-icon">
                <path d="bunch of numbers"></path>
            </g>
        </defs>
    </svg>
</iron-iconset-svg>

另一个svg定义为

<iron-iconset-svg name="club-icon" size="512">
    <svg>
        <defs>
            <g id="club-icon">
                <path d="bunch of numbers"></path>
            </g>
        </defs>
    </svg>
</iron-iconset-svg>

<iron-iconset-svg name="club-icon" size="300">
    <svg>
        <defs>
            <g id="book-icon">
                <path d="bunch of numbers"></path>
            </g>
        </defs>
    </svg>
</iron-iconset-svg>

---

是否有一种方法可以让每个自定义图标定义自己的viewBox，或者单个iconset中定义的每个svg都必须共享相同的属性。目前，我有多个自定义元素html文件，但每个自定义元素都是一个http请求（我正在尝试最小化该请求）。

您可以在g元素上尝试转换比例吗

<g id="book-icon" transform="scale(1.71)">

1.71=512/300

---

或者，如果您使用的是gulp/grunt，则可以使用svg scaler或类似工具调整svg的大小，使其保持不变。可以使用符号进行调整

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

</svg>

请参阅这篇关于CSS技巧的文章以获得进一步的解释

这个注释（）似乎很贴切：

注释：元素本身并不意味着要呈现。仅呈现元素的实例（即，元素对元素的引用）。这意味着某些浏览器可能会拒绝直接显示某个元素，即使CSS display属性表明不是这样。