Soru SVG öğesi nasıl oluşturulur?


Birlikte gruplandırılmış bazı SVG öğeleri var <g> öğesi. Ben sadece bunu stil yapmak istiyorum <g> elemanların gruplandırılmasını gösteren eleman. Sanki bir arka plan rengi ve ona bir sınır vermek istiyorum. Nasıl elde edilir?

denedim fill ve stroke özniteliği <g> eleman, ama işe yaramıyor. Nasıl mümkün olabilir? Şimdiden teşekkürler!

Burada örnek

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
    <g fill="blue" stroke="2">
            <rect id="svg_6" height="112" width="84" y="105" x="136" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#00ff00"/>
        <ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="271" cy="156" id="svg_7" rx="64" ry="56"/>
    </g>
</svg>

25
2017-09-09 11:31


Menşei


Bunun için birkaç js kütüphanesi var. Deneyin raphaeljs.com - Alex
raphaeljs grubu svg elemanları olabilir? - Sudarshan


Cevaplar:


Aslında çizemezsin Konteyner Elemanları

Ama ihtiyacınız olan şeyleri simüle etmek için bir "SVG" ile bir "foreignObject" kullanabilirsiniz.

http://jsfiddle.net/VBmbP/4/

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
      <foreignObject id="G" width="300" height="200">
        <svg>
          <rect fill="blue" stroke-width="2" height="112" width="84" y="55" x="55" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000"/>
          <ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="155" cy="65" id="svg_7" rx="64" ry="56"/>     
        </svg>
          <style>
              #G {
                background: #cff; border: 1px dashed black;
              }
              #G:hover {
                background: #acc; border: 1px solid black;
              }
          </style>
      </foreignObject>
    </svg>

18
2017-09-09 12:59



Evet, yapabilirsin, ancak bir ForeignObject bunun için tasarlanmamıştır: developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject Bu anlamda, bir rect nesneden daha uygun değildir. - emisilva
Ama bir rect içinde elemanlar yerleştiremezsin, değil mi? - rafaelcastrocouto
Mmm, bu iyi bir nokta. - emisilva


Bir SVG'ye stil ekleyemezsiniz <g> öğesi. Tek amacı çocukları gruplamak. Bu da, ona verdiğiniz stil özelliklerinin çocuklarına verildiği anlamına gelir. fill="green" üzerinde <g> otomatik anlamına gelir fill="green" onun çocuğunda <rect> (sahip olmadığı sürece fill Şartname).

Tek seçeneğiniz yeni eklemek <rect> SVG'ye ve buna uygun olarak <g> çocuk ölçüleri.


33
2017-09-09 11:53



Bu çoğunlukla doğrudur, ancak ör. opacity Bu, <g> öğesinin kendisine uygulanır. - Erik Dahlström


"G" elemanını verdiğiniz stil, "g" elemanının kendisinin değil, çocuk elemanlarını uygulayacaktır.

Bir dikdörtgen öğesi ekleyin ve stil oluşturmak istediğiniz gruba yerleştirin.

Görmek: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

EDIT: güncellenmiş ifadeler ve yorumlarda keman ekledi.


2
2017-09-09 11:53



<rect> şekillere sahip olmamak veya <g> chidlren olarak (hatta SVG2). Dolayısıyla, çocuklarının boyutlarını karşılamak için basitçe yayılmayacaktır. - Boldewyn
@Boldewyn Ben tam anlamıyla değil, grafiksel olarak demek istedim, ama bunu açıklığa kavuşturmak için yeniden ifade edeceğim. Burada görüldüğü gibi: jsfiddle.net/VBmbP/2 - Andrew Grothe