Question

我有一个有SVG对象的网站，我希望能够将动态SVG对象插入到特定位置的父SVG对象中（动态SVG始终具有固定大小）。

这是我的SVG代码：

＆＃13;

<svg width="100%" height="100%" viewBox="0 0 355 355" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYmax" class="hero_figure">
  <g id="hero_create" class="hero_create">
    <rect fill="#fff" stroke="#000" stroke-width="1.5" x="213" y="103" width="140" height="20" transform="rotate(20 283,113.00000000000003) " rx="10" class="hero_right_arm" id="hero_right_arm" />
    <rect fill="#fff" stroke="#000" stroke-width="1.5" x="-2" y="103" width="140" height="20" transform="rotate(-20 67.99999999999997,112.99999999999999) " rx="10" class="hero_left_arm" id="hero_left_arm" />
    <rect fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" x="138" y="78" width="75" height="120" rx="10" class="hero_body" id="hero_body" />
    <ellipse fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" cx="175.5" cy="38" rx="41" ry="35.5" class="hero_head" id="hero_head" />
    <rect fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" x="110.5" y="198" width="20" height="150" transform="rotate(20 120.50000000000009,273) " rx="10" class="hero_left_leg" id="hero_left_leg" />
    <rect fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" x="221" y="198" width="20" height="150" rx="10" transform="rotate(-20 231.0000000000001,273) " class="hero_right_leg" id="hero_right_leg" />
  </g>
  <g id="hero_item_slot" class="hero_item_slot">
    <rect opacity="0.5" height="75" width="75" y="94.5" x="275" stroke-width="1.5" stroke="#000" fill="#fff" class="hero_right_arm_item_slot" id="hero_right_arm_item_slot" />
    <rect opacity="0.5" height="75" width="75" y="94.5" x="0" stroke-width="1.5" stroke="#000" fill="#fff" class="hero_left_arm_item_slot" id="hero_left_arm_item_slot" />
    <rect opacity="0.5" height="75" width="75" y="-0.5" x="137.5" stroke-width="1.5" stroke="#000" fill="#fff" class="hero_head_item_slot" id="hero_head_item_slot" />
    <rect opacity="0.5" height="75" width="75" y="100" x="138" stroke-width="1.5" stroke="#000" fill="#fff" class="hero_body_item_slot" id="hero_body_item_slot" />
    <rect opacity="0.5" height="75" width="75" y="269.5" x="215" stroke-width="1.5" stroke="#000" fill="#fff" class="hero_right_leg_item_slot" id="hero_right_leg_item_slot" />
    <rect opacity="0.5" height="75" width="75" y="269.5" x="60" stroke-width="1.5" stroke="#000" fill="#fff" class="hero_left_leg_item_slot" id="hero_left_leg_item_slot" />
  </g>
</svg>

＆＃13;

我要做的是将一个对象插入到hero_item_slot中的每个矩形中，其中该项目的固定大小始终为74x74。

例如，将SVG插入到大小为74x74的hero_right_leg_item_slot中。

有人有解决方案吗？

Answer 1

这是我在@RobertLongson的帮助下最终修复它的方法。

的index.php：

                    </g>
                    <g transform="translate(1, 95.5)" class="hero_left_arm_item" id="hero_left_arm_item">

                    </g>
                    <g transform="translate(138.5, 0.5)" class="hero_head_item" id="hero_head_item">

                    </g>
                    <g transform="translate(139, 101)" class="hero_body_item" id="hero_body_item">

                    </g>
                    <g transform="translate(216, 270.5)" class="hero_right_leg_item" id="hero_right_leg_item">

                    </g>
                    <g transform="translate(61, 270.5)" class="hero_left_leg_item" id="hero_left_leg_item">

                    </g>
                </g>
            </svg>

在最后一个是我插入数据的地方。
我使用Transform="translate(X,Y)来设置原始框的位置。
然后插入一个对象，我只需使用它：

$(document).ready(function(){
    $("#hero_right_arm_item").html($("#test"));
    $("#hero_left_arm_item").html($("#test"));
    $("#hero_head_item").html($("#test"));
    $("#hero_body_item").html($("#test"));
    $("#hero_right_leg_item").html($("#test"));
    $("#hero_left_leg_item").html($("#test"));
});

我使用的svg看起来像这样：

    <svg id="test" width="75" height="75" xmlns="http://www.w3.org/2000/svg">
        <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
        <g>
            <rect fill="#ff007f" id="canvas_background" height="75" width="75" y="-1" x="-1"/>
        </g>
        <g>
            <rect id="svg_1" height="28" width="41" y="29.5" x="17.5" stroke-width="1.5" stroke="#000" fill="#A4FFFF"/>
        </g>
    </svg>

我不需要删除SVG标记，因为我可以直接在SVG中插入SVG。

希望这可以帮助某人，并且感谢@RobertLongson帮助JS和Method-Draw制作我绘制SVG文件的工具。

将.SVG插入.SVG对象的特定坐标

1 个答案: