Css

Paano magdagdag ng border / outline / stroke sa mga elemento ng SVG sa CSS?

How Add Border Outline Stroke Svg Elements Css



Solusyon:

Sa CSS , isang bagay tulad ng:

landas {punan: wala; stroke: # 646464; stroke-width: 1px; stroke-dasharray: 2,2; stroke-linejoin: bilog; } 
Subukang magdagdag ng mga drophadow.

 
 
svg {filter: drop-shadow (1px 1px 0px purple) drop-shadow (-1px 1px 0px purple) drop-shadow (1px -1px 0px purple) drop-shadow (-1px -1px 0px purple); }
.st0 {punan: #ffffff; stroke-miterlimit: 10;} 
Para sa tanong: Paano magdagdag ng border / outline / stroke sa mga elemento ng SVG sa mga webpage na may CSS?
 
 
 
Maaari mong gawin sa CSS:
 
 
 
landas {balangkas: 3px solidong berde; }
Mangyaring tandaan hanggang sa 2018 sinusuportahan ito ng chrome at safari, ngunit maaaring hindi magamit sa lahat ng mga modernong browser. Tingnan ang halimbawa sa ibaba:
 
Nag-apply ako ng outline sa pamamagitan ng CSS sa apangkat na may mga daanan sa loob. Sa static mukhang maganda ito. Sa pabago-bago (pagkaladkad) nakikita ko panaka-nakang ang mga artifact na ito (sa kaliwa)
 
 ipasok ang paglalarawan ng imahe dito
 
 
 
I-UPDATE:
 
     
  • kung ang balangkas ay 'solid' - walang mga artifact
    •  
  • Hindi sinusuportahan ng safari mobile ang balangkas samga elemento...
    •