在 svg 中转换 svg答案

【问题标题】：Transform svg inside svg在 svg 中转换 svg
【发布时间】：2018-10-25 13:09:52
【问题描述】：

好的，我有两个例子。首先是单个 svg，我对其应用转换以水平翻转 svg：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 109.55 40.51" transform="scale(-1,1)">

第二个是同一个 svg，只是现在它被包裹在另一个 svg 中（使用 snap svg 创建）：

http://jsfiddle.net/dFTtd/650/

<svg id="combinationDrawSvg" width="100%" height="254" class="overlap-annotations"><g transform="matrix(1,0,0,1,0,0)"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.55 40.51" transform="scale(-1,1)">

现在，如果我对内部 svg 应用相同的变换，则不会应用变换。关于为什么转换在示例 1 中有效而在示例 2 中无效的任何想法？我有点坚持这个，所以一些帮助可能有用。

【问题讨论】：

您在 Firefox 中尝试过吗？并非所有浏览器都支持
为了扩展罗伯特所说的，如果你用<g/>将绘图包裹在你的内部svg中，并在上面放置变换，它就可以工作。嵌套<svg/> 标签上的转换使浏览器脾气暴躁
我会通过<use xlink:href="#Layer_1"/> use 第二个中的第一个 svg 并将转换应用于原始。将 svg 直接嵌入到 svg 中通常不是好的做法（据我所知），尽管我会参考 Robert 的更多见解。
@RobertLongson：如果我在第二个示例中尝试这样做，那么图像就消失了。还是因为 svg 在屏幕之外？
@ChrisW。我们将多个 svg 合并为一个，因此我们需要将 svg 相互嵌入...

标签： svg transform

【解决方案1】：

使用符号>元素

<!-- id with lowercase -->
<symbol id="layer_1" data-name="Layer 1" preserveAspectRatio="xMidYMid meet" viewBox="0 0 109.55 40.51">
    <!-- your paths -->
</symbol>

<g transform="matrix(1,0,0,1,0,0)">
    <use xlink:href="#layer_1" x="0" y="0" transform-origin="50% 50%" transform="scale(-1, 1)" />
</g>

【讨论】：