Как сделать, чтобы svg было только по контуру нарисованной фигуры?

Question

[night_breeze]

У меня есть страница, на которой нарисованы фигуры. Так нужно чтобы при наведении на область фиолетовую те фигуры пропадали. А у меня svg область идет квадратной формы
SVG

<div id="wrapper">
    <div class="svgs">
        <svg id="leftSVG" class="svg" width="150" height="130">
            <symbol id="s-crown">
                <path id="left" fill="white" stroke="white" stroke-width="1" d="M 0,0 L 586.4238,0 L819.6,275.52 L 200.802,672 L 0,672 z"/>
            </symbol>
            <use xlink:href="#s-crown" x="0" y="0"/>
        </svg>
        <svg id="rightSVG" class="svg" width="150" height="130">
            <symbol id="s-crown1">
                <path id="right" d="" fill="white" stroke="white" stroke-width="1" d="M 0,103.8343488 L 159.2756,0 L 159.2756,292.656 z"/>
            </symbol>
            <use xlink:href="#s-crown1" x="0" y="0"/>
        </svg>
        <svg id="bottomSVG" class="svg" width="150" height="130">
            <symbol id="s-crown2">
                <path id="bottom" d="M 0,183.45600000000002 L 458.83939999999996,183.45600000000002 L 293.657216,0 z" fill="white" stroke="white" stroke-width="1" />
            </symbol>
            <use xlink:href="#s-crown2" x="0" y="0"/>
        </svg>
      
    </div>
    <div class="content"></div>

Comments

[OVK2015]

У svg width="150" height="130", а сам path там намного больших размеров

[night_breeze]

OVK2015: js function respondSVG() {
/**LEFT CANVAS*/
var lW = $(container).width() * 0.6;
var lH = $(container).height();
$('#leftSVG').attr('width', lW); //max width
$('#leftSVG').attr('height', lH); //max height
$(left).attr('d', 'M 0,0 L '+lW * 0.7155+',0 L'+ lW+','+lH * 0.41+' L '+lW * 0.245+','+lH+' L 0,'+lH+' z');

/**rightCANVAS*/
var rW = $(container).width() * 0.1166;
var rH = $(container).height() * 0.4355;

$('#rightSVG').attr('width', rW);
$('#rightSVG').attr('height', rH);

$(right).attr('d', 'M 0,'+rH * 0.3548+' L '+rW+',0 L '+rW+','+rH+' z');

/**BOTTOM CANVAS*/
var bW = $(container).width() * 0.3359;
var bH = $(container).height() * 0.273;
$('#bottomSVG').attr('width', bW);
$('#bottomSVG').attr('height', bH);

$(bottom).attr('d', 'M 0,'+bH+' L '+bW+','+bH+' L '+bW*0.64+',0 z');

/**TOP*/
var tW = $(container).width() * 0.268;
var tH = $(container).height() * 0.2194;

$('#topSVG').attr('width', tW);
$('#topSVG').attr('height', tH);

$(top).attr('d', 'M 0,0, L '+tW+', 0 L '+tW*0.3669+','+tH+' z');
console.log($(top).attr('d'));
}

respondSVG();

[OVK2015]

night_breeze: О! Еще один кусочек пазла есть.) А container здесь что?

[night_breeze]

OVK2015: Это просто пустой тот фиолетовый блок

[OVK2015]

night_breeze: тогда $('.container'), а не просто $(container).
+ у него изначально какие-то значения ширины/высоты/позиционирования есть?

[night_breeze]

OVK2015: там var container = document.getElementById("wrapper");, а в $('.container') width: 100%; height: 100vh;

[night_breeze]

OVK2015: wraper: posirion: relative width: 100%; height: 100vh;

[OVK2015]

night_breeze: Все равно какая-то не полная картинка выходит. Что за left, right, bottom, top? Где они в разметке? Что из всех этих тегов является "основной фигурой". По идее проще создать svg фигуру одним path, ее соседей другими. Ну и прятать соседей по нужному событию, соответственно