我有一个拥有SVG对象的网站,我希望能够将动态SVG对象插入到特定位置的父SVG对象中(动态SVG始终具有固定的大小)。
这是我的SVG代码:
<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>
我想做的是将一个对象插入hero_item_slot中的每个矩形中,其中该项目将始终具有74x74的固定大小。
例如,将尺寸为74x74的SVG插入hero_right_leg_item_slot。
有人对此有解决方案吗?
最佳答案
这就是我在@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文件的工具。
关于css - 将.SVG插入.SVG对象上的特定坐标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27170671/