Maison  >  Questions et réponses  >  le corps du texte

Dégradé radial CSS en dégradé radial SVG

Est-il possible de faire un dégradé radial en SVG comme en CSS http://codepen.io/A973C/pen/hnEaf (je veux dire les feux des feux de circulation)

.red{
  background: red;
  background-image: radial-gradient(brown, transparent);
  background-size: 15px 15px; 
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 35px;
  animation: 13s red infinite;
  border: dotted 2px red;
  box-shadow: 
    0 0 20px #111 inset,
    0 0 10px red;
}

Mon dégradé SVG ressemble à ceci http://jsfiddle.net/x9a2Lyx1/ Je ne comprends vraiment pas comment répéter le dégradé comme dans l'exemple CSS

P粉308783585P粉308783585335 Il y a quelques jours577

répondre à tous(2)je répondrai

  • P粉604669414

    P粉6046694142023-12-12 15:05:56

    Les éléments SVG intégrés dans les pages Web sont traités de la même manière que n'importe quel autre élément, il vous suffit donc d'utiliser CSS pour réaliser :

    svg {
      background: green;
      background-image: radial-gradient(lime, transparent);
      background-size: 3px 3px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: dotted 2px lime;
      box-shadow: 
        0 0 20px #111 inset,
        0 0 10px lime;
    }
    <svg width="120" height="120" 
         xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink">       
    </svg>

    répondre
    0
  • P粉617237727

    P粉6172377272023-12-12 13:24:24

    J'ai résolu ce problème en utilisant le modèle SVG -> http://jsfiddle.net/k5527kym/

    <pattern id="muster_c" patternUnits="userSpaceOnUse" width="2" height="2" x="0" y="0">
            <circle cx="1" cy="1" r="2" fill="url(#MyGradient)"/>
    </pattern>

    répondre
    0
  • Annulerrépondre