SVGでDefsを使用

Question

ここに何かがありません。 svg要素を使用した簡単な例です。 私はdefs（再利用可能な定義）を定義しており、要素内でid 'cry16CyclamenOpal_0.c15'を使用して定義しています。

JSFiddle

コード：

<svg width="1366" height="612" id="_svg" class="svg" viewBox="-78.48 43.82 752.30 337.05" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <g id="def_CyclamenOpal"> 
      <path d="M0,22c0,12.2,9.9,22,22,22s22-9.8,22-22S34.2,0,22,0S0,9.9,0,22" fill="#795482"></path> 
      <path d="M4.9,22h34.2l-1.3-6.5l-3.4-5.6L28.6,6H15.5l-5.3,3.8l-3.9,5.7L4.9,22z" fill="#DD9FBB"></path> 
      <path d="M39.1,22H4.9l1.3,6.5l3.4,5.6l5.9,4h13.1l5.2-3.8l3.9-5.8L39.1,22z" fill="#552860"></path> 
      <path d="M4.9,22l1.3,6.5l7.5-3.1l4.8,5l-2.9,7.7l6.1,1.3l7-1.3l-3.1-7.6l4.8-5l7.4,3l1.3-6.5l-1.3-6.5l-7.3,3.1l0,0l-4.8-4.9L28.6,6l-6.2-1.3L15.5,6l3,7.6l-4.9,4.9l-7.4-3L4.9,22z" fill="#D84C5D"></path> 
      <path d="M18.5,30.7l-5.1-5.1v-7l5.1-5h7.1l5,5v7l-5,5.1H18.5L18.5,30.7z" fill="#A568AF"></path> 
     </g> 
    </defs> 

    <g class="elementParent"> 
     <g id="cry16CyclamenOpal_0.c15" class="ele" data-action="ele" transform="matrix(0.27,0,0,0.27,339.422,124.718)"> 
      <circle class="outer" cx="22" cy="22" r="22" fill="url(#defs_CyclamenOpal)"></circle> 
     </g> 
    </g> 
</svg> 

私の質問は、なぜDEFSは、画面上に使用可能ではありませんか？スクリーン上の要素にパターンが表示されないのはなぜですか？ jsfiddleをご覧ください。

Answer 1

注：
私が最初に質問を読み違えと「オフ・ターゲット」の回答を掲載しました。 私はOPの質問には役に立たなかったので、この部分を削除しました。ここ

が塗りつぶしパターンを定義するために<pattern>タグを使用して（わずかに変更された）溶液である：

<svg width="1366" height="612" id="_svg" class="svg" viewBox="-78.48 43.82 752.30 337.05" 
 
     xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <pattern id="opal" x="0" y="0" width="45" height="45" patternUnits="userSpaceOnUse"> 
 
      <path d="M0,22c0,12.2,9.9,22,22,22s22-9.8,22-22S34.2,0,22,0S0,9.9,0,22" fill="#795482"></path> 
 
      <path d="M4.9,22h34.2l-1.3-6.5l-3.4-5.6L28.6,6H15.5l-5.3,3.8l-3.9,5.7L4.9,22z" fill="#DD9FBB"></path> 
 
      <path d="M39.1,22H4.9l1.3,6.5l3.4,5.6l5.9,4h13.1l5.2-3.8l3.9-5.8L39.1,22z" fill="#552860"></path> 
 
      <path d="M4.9,22l1.3,6.5l7.5-3.1l4.8,5l-2.9,7.7l6.1,1.3l7-1.3l-3.1-7.6l4.8-5l7.4,3l1.3-6.5l-1.3-6.5l-7.3,3.1l0,0l-4.8-4.9L28.6,6l-6.2-1.3L15.5,6l3,7.6l-4.9,4.9l-7.4-3L4.9,22z" fill="#D84C5D"></path> 
 
      <path d="M18.5,30.7l-5.1-5.1v-7l5.1-5h7.1l5,5v7l-5,5.1H18.5L18.5,30.7z" fill="#A568AF"></path> 
 
     </pattern> 
 
    </defs> 
 

 
    <g class="elementParent"> 
 
     <circle class="outer" cx="55" cy="155" r="100" fill="url(#opal)"></circle> 
 
    </g> 
 
</svg>