Question

我面临着挑战，但是不幸的是，我倾向于在视觉上吸引人。我需要从两个不同供应商的此类图像库中分别获取两个单独的SVG图像，每个图像可能具有各自的坐标系，并按照以下方式进行组合。我可以依靠一些东西：

两家供应商的每张图片都是正方形。
供应商A的图像是单色的。
所有图像在浏览器中都能很好地呈现。
我已经为两套图像和每个条款支付了许可费，我无需担心归因。
我可以访问所有SVG文件的源。
我可以或多或少地操纵文件，但是如果我能弄清楚魔术图案，我想使用groovy。

我需要在自己的小步骤中应用以下规则：

放下希望在48 x 48的空间中渲染的SVG轮廓框架。
插入从供应商A集中选择的SVG图像。
对该图像上选定的预选颜色应用统一的颜色更改。
插入来自供应商B的所选图像，并缩放并定位它，使其占据左下象限。它应位于基础供应商A映像的顶部。其颜色将保持不变。
整个内容应在J. Random Modern Browser中呈现。

到目前为止，我似乎还无法真正找到嵌套SVG的正确模式，大多数在线教程提供的示例甚至都无法在任何免费的在线svg编辑器中进行渲染。我被困住了，甚至不确定如何开始。通常，我会在其中一个问题中放入一些示例代码，但是目前，似乎没有一个问题甚至可以解决。

供应商A图标如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
<g>
    <g transform="translate(50 50) scale(0.69 0.69) rotate(0) translate(-50 -50)" style="fill:#0059B3">
        <svg fill="#0059B3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
            <rect width="100" height="100" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
        </svg>
    </g>
</g>
</svg>

供应商B图标如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
    <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

我需要将两者结合起来，以便第二个位于第一个的左下象限的顶部。如果可能的话，首先需要在不更改内部svg文本的情况下应用颜色更改。展示这一点超出了我在Microsoft Paint中的能力，但我希望这很清楚。

Answer 1

正如我在评论中告诉您的那样，您需要在<symbol>个元素中转换SVG，然后<use>个<symbol>元素。当您使用具有<symbol>属性的viewBox时，可以使用width，height，x和{{1 y元素的}}属性。为了能够更改颜色，您可以在<use>元素中移动样式。另外，您可以选择表示属性而不是CSS。

<use>

svg{border:1px solid; width:90vh}

嵌套SVG重叠编程挑战

1 个答案: