SVG-Maske erstellen ?

[mark]

Schönen Abend,

ich hoffe ich schaff' es mein Problem anschaulich darzulegen.
Gegeben sei folgende skizzierte Seiten-Struktur:

  
<style>  
#blog{  
     background: url(img/timeline.png) repeat-y 50%;  
}  
</style>  
  
<div id="blog">  
    <div class="post post-left">  
        <div class="arrow-left"></div>  
        <!-- POST CONTENT -->  
    </div>  
    <div class="post post-right">  
        <div class="arrow-right"></div>  
        <!-- POST CONTENT -->  
    </div>  
</div>  

Das Ganze sieht dann in etwa folgendermaßen aus: die Timeline in der Mitte und die einzelnen Posts, die links und rechts sich mit einem Pfeil an diese Timeline dranhängen.

MEIN PROBLEM: Dass die Pfeile der Posts scheinbar die Timeline unterbrechen und einen Punkt in der Timeline einfügen funktioniert nur, weil sich die Pfeile auf einem gleichmäßigen Hintergrund befinden. Die Hintergrundfarbe ist bekannt, deshalb funktioniert der Trick.

Ich möchte dies aber mit einem fixen Hintergrundbild realisieren und benötige dazu eine Art Transparenz-MASKE. Die Pfeile sollen die Timeline unterbrechen und man soll das Hintergrundbild trotzdem durchschimmern sehen.

Leider kenn ich mich mit SVG kein bisschen aus. Die Tutorials dazu sind sehr umfangreich und, bevor ich mich da reinknie, wollte ich fragen ob :

1. dies mit SVG überhaupt möglich ist ?
2. jemand evtl. einen Lösungsvorschlag OHNE SVG hat ?

lg
mark