Bir SVG'nin kontur genişliğinin nasıl çizileceğini kontrol edebilir misiniz?

Şu anda tarayıcı tabanlı bir SVG uygulaması oluşturuluyor. Bu uygulama içinde, dikdörtgenler dahil olmak üzere çeşitli şekiller kullanıcı tarafından şekillendirilebilir ve konumlandırılabilir.

Diyelim ki stroke-widthbir SVG rectelemanına a uyguladığımda 1px, kontur rectofset ve inset'e farklı tarayıcılar tarafından farklı şekillerde uygulanır. Bu, özellikle bir dikdörtgenin dış genişliğini ve görsel konumunu hesaplamaya ve diğer öğelerin yanına yerleştirmeye çalıştığımda zahmetli olduğunu kanıtlıyor .

Örneğin:

• Firefox 1 piksel ek (alt ve sol) ve 1 piksel ofset (üst ve sağ) ekler
• Chrome 1 piksel ek (üst ve sol) ve 1 piksel ofset (alt ve sağ) ekler

Şimdiye kadar tek çözümüm gerçek sınırları kendim çizmek olacak (muhtemelen path araçla) ve sınırları konturlu öğenin arkasına yerleştirmek . Ancak bu çözüm hoş olmayan bir çözüm ve mümkünse bu yolda gitmemeyi tercih ederim.

Benim sorum şu, bir SVG'nin stroke-widthelemanlara nasıl çizildiğini kontrol edebiliyor musunuz ?

Hayır, konturun bir öğenin içine mi yoksa dışına mı çizileceğini belirleyemezsiniz. SVG çalışma grubuna 2003 yılında bu işlevsellik için bir teklifte bulundum , ancak destek (veya tartışma) almadı.

Teklifte belirttiğim gibi,

• kontur genişliğinizi iki katına çıkararak ve ardından nesneyi kendisine kırpmak için bir kırpma yolu kullanarak "iç" ile aynı görsel sonucu elde edebilirsiniz ve
• kontur genişliğini iki katına çıkarıp nesnenin kontursuz bir kopyasını üst üste bindirerek 'dış' ile aynı görsel sonucu elde edebilirsiniz.

Düzenleme : Bu cevap gelecekte yanlış olabilir. Bu kullanarak bu sonucu elde etmek mümkün olmalıdır SVG vektör Effects birleştirerek, veStrokePathile veIntersect( 'iç' için) ya daveExclude ('dış için . Ancak, Vektör Efektleri hala bulabildiğim uygulamaları olmayan çalışan bir taslak modüldür.

Düzenleme 2 : SVG 2 taslak belirtimi bir stroke-alignmentözellik içerir (merkezi | içeride | olası değerlerin dışında). Bu özellik, sonunda ABD'ye dönüştürebilir.

Edit 3 : Eğlenceli ve dissapointingly, SVG çalışma grubu stroke-alignmentSVG 2'den kaldırıldı . Burada nesir sonra açıklanan bazı endişeleri görebilirsiniz .

GÜNCELLEME:stroke-alignment nitelik 1 Nisan SVG İnme adı verilen tamamen yeni spec taşındı 2015'te oldu .

SVG 2.0 Editörünün 26 Şubat 2015 Taslağı (ve muhtemelen 13 Şubat'tan beri) ), stroke-alignmentözelliği mevcut olduğudeğerlerle inner, center (varsayılan) veouter .

stroke-location@Phrogz tarafından önerilen mülk ve daha sonraki stroke-positionöneri ile aynı şekilde çalışıyor gibi görünüyor . Bu mülk en az 2011 yılından beri planlanmıştır, ancak

SVG 2 vuruş pozisyonunu belirtmek için bir yol içermelidir

, ertelendiği için spesifikasyonda hiçbir zaman ayrıntılı olmamıştır - şimdiye kadar görünüyor.

Hiçbir tarayıcı bu özelliği desteklemiyor veya bildiğim kadarıyla yeni SVG 2 özelliklerinden herhangi biri henüz yok, ancak umarım spesifikasyonlar olgunlaştıkça yakında olacak. Bu şahsen sahip olduğum bir özellik oldu ve nihayet spec orada gerçekten mutluyum.

Mülkün açık yollarda ve döngülerde nasıl davranması gerektiği konusunda bazı sorunlar var gibi görünüyor. Bu sorunlar büyük olasılıkla tarayıcılar arasındaki uygulamaları uzatacaktır. Ancak, tarayıcılar bu özelliği desteklemeye başladığında bu yanıtı yeni bilgilerle güncelleyeceğim.

Birkaç kısıtlaması olan kolay bir yol buldum, ancak benim için çalıştı:

• def'deki şekli tanımlar
• şekle başvuran bir klip yolu tanımlayın
• kullanın ve dış kırpılmış olarak konturu iki katına çıkarın

İşte çalışan bir örnek:

<svg width="240" height="240" viewBox="0 0 1024 1024">
<defs>
	<path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
	<clipPath id="clip">
		<use xlink:href="#ld"/>
	</clipPath>
</defs>
<g>
	<use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="#00D2B8" clip-path="url(#clip)"/>
</g>
</svg>

Kontur ve dolguların sırasını belirlemek için CSS kullanabilirsiniz. Yani, önce inme sonra ikinciyi doldurun ve istediğiniz efekti elde edin.

MDN açık paint-order: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order

CSS kodu:

paint-order: stroke;

Aşağıda, tarayıcıya göre verilen konturu kullanarak üste, sağa, alta ve sola kaç piksel eklemeniz gerektiğini hesaplayan bir işlev vardır:

var getStrokeOffsets = function(stroke){

        var strokeFloor =       Math.floor(stroke / 2),                                                                 // max offset
            strokeCeil =        Math.ceil(stroke / 2);                                                                  // min offset

        if($.browser.mozilla){                                                                                          // Mozilla offsets

            return {
                bottom:     strokeFloor,
                left:       strokeFloor,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }else if($.browser.webkit){                                                                                     // WebKit offsets

            return {
                bottom:     strokeCeil,
                left:       strokeFloor,
                top:        strokeFloor,
                right:      strokeCeil
            };

        }else{                                                                                                          // default offsets

            return {
                bottom:     strokeCeil,
                left:       strokeCeil,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }

    };

Yukarıdaki kişilerin belirttiği gibi, konturun yol koordinatlarına bir ofseti yeniden hesaplamanız veya genişliğini iki katına çıkarmanız ve ardından bir tarafı veya diğerini maskelemeniz gerekir, çünkü SVG yalnızca Illustrator'ın kontur hizalamasını yerel olarak desteklemez, aynı zamanda PostScript de .

Adobe'nin PostScript Kılavuzu 2. baskı durumlarında vuruş için şartname: " 4.5.1 okşamaya: inme operatörü akım yolu boyunca bazı kalınlıkta bir çizgi çizer yolundaki her düz veya eğri parçanın için. Strok bir çizgi çizer merkezli üzerinde yanları segmente paralel olan segment. " (onların vurguları)

Spesifikasyonun geri kalanında, hattın konumunu dengelemek için hiçbir özellik yoktur. Illustrator içeriye veya dışarıya hizalanmanıza izin verdiğinde, gerçek yolun ofsetini yeniden hesaplar (çünkü hala üst baskıdan sonra maskelemeden hesaplama açısından daha ucuzdur). .Ai belgesindeki yol koordinatları, rasterleştirilen veya son biçime aktarılanlar değil referanstır.

Inkscape'in yerel biçimi spec SVG olduğundan, specte bulunmayan bir özellik sunamaz.

İşte için bir çalışma dönünce sınırlanmıştır iç rect kullanıyor symbolve use.

Örnek : https://jsbin.com/yopemiwame/edit?html,output

SVG :

<svg>
  <symbol id="inner-border-rect">
    <rect class="inner-border" width="100%" height="100%" style="fill:rgb(0,255,255);stroke-width:10;stroke:rgb(0,0,0)">
  </symbol>
  ...
  <use xlink:href="#inner-border-rect" x="?" y="?" width="?" height="?">
</svg>

Not: girişini değiştirdiğinizden emin olun ?.use gerçek değerlerle .

Arkaplan : sembolü değiştirerek yeni bir görünüm oluşturur, çünkü bu işleri nedeni budur symbolile svgve gölge DOM bir eleman yaratılmaktadır. Bu svg, gölge DOM'nin geçerli SVGöğenize bağlanır . svgS'nin yuvalanabileceğini ve her birinin svgçakışan kenarlık da dahil olmak üzere çakışan her şeyi kırpan yeni bir görünüm oluşturduğunu unutmayın . Neler olup bittiğine dair daha ayrıntılı bir genel bakış için Sara Soueidan'ın bu harika makalesini okuyun .

Bunun ne kadar yararlı olacağını bilmiyorum ama benim durumumda sadece kenarlığı olan başka bir daire oluşturdum ve onu diğer şekle “içine” yerleştirdim.

(Kirli) olası bir çözüm kalıpları kullanmaktır,

İşte içten içe üçgeni olan bir örnek:

https://jsfiddle.net/qr3p7php/5/

<style>
#triangle1{
  fill: #0F0;
  fill-opacity: 0.3;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 20;
}
#triangle2{
  stroke: #f00;
  stroke-opacity: 1;
  stroke-width: 1;
}    
</style>

<svg height="210" width="400" >
    <pattern id="fagl" patternUnits="objectBoundingBox" width="2" height="1" x="-50%">
        <path id="triangle1" d="M150 0 L75 200 L225 200 Z">
    </pattern>    
    <path id="triangle2" d="M150 0 L75 200 L225 200 Z" fill="url(#fagl)"/>
</svg>

Xavier Ho'dan çözümKonturun genişliğini iki katına çıkarmak ve boya sırasını değiştirmek için parlaktır, ancak yalnızca dolgu şeffaf olmayan, düz bir renkse çalışır.

Başka bir yaklaşım geliştirdim, daha karmaşık ama her türlü dolgu için çalışıyor. Aynı zamanda elips veya yollarda da çalışır (daha sonra garip davranışlara sahip bazı köşe vakaları vardır, örneğin, kendilerini geçen, ancak çok fazla olmayan açık yollar).

İşin püf noktası şekli iki katman halinde göstermektir. Biri kontursuz (sadece dolgu) ve diğeri sadece çift genişlikte (şeffaf dolgu) konturlu ve tüm şekli gösteren bir maskeden geçirilir, ancak orijinal şekli kontursuz olarak gizler.

  <svg width="240" height="240" viewBox="0 0 1024 1024">
  <defs>
    <path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
    <mask id="mask">
      <use xlink:href="#ld" stroke="#FFFFFF" stroke-width="160" fill="#FFFFFF"/>
      <use xlink:href="#ld" fill="#000000"/>
    </mask>
  </defs>
  <g>
    <use xlink:href="#ld" fill="#00D2B8"/>
    <use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="red" mask="url(#mask)"/>
  </g>
  </svg>