Je travaille sur une image svg (comme indiqué dans la capture d'écran marquée par une flèche comportant quatre triangles) code html comme indiqué ci-dessous appartenant à la page Web dans laquelle je veux pour augmenter sa hauteur .
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<style>.path-one,.path-two{fill-rule:evenodd;clip-rule:evenodd;fill:#00afc9}.path-two{opacity:.4;fill:#93c83d}</style>
<path class="path-one" d="M30 30H0V0"></path>
<path class="path-two" d="M0 30V0h30"></path>
</svg>
J'ai essayé d'ajouter width = "150px" et height = "150px" dans la balise svg mais cela ne semble pas fonctionner.
Problème: strong>
Je me demande quels changements je devrais faire dans le code ci-dessus pour que la hauteur de l'image svg soit modifiée
3 Réponses :
appliquez-le sur l'élément svg:
svg { width: 150px; height: 150px }
Veuillez noter que l'image svg prend en fait la hauteur et la largeur que vous souhaitez définir en utilisant uniquement les propriétés de hauteur et de largeur. Le problème réside cependant dans vos chemins. Vous pouvez ajouter une couleur d'arrière-plan à l'élément svg pour vérifier qu'il change réellement la hauteur et la largeur.
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="150"
viewBox="0 0 30
30" enable-background="new 0 0 311.7 311.5">
<path fill="red" class="path-one" d="M30 30H0V0"></path>
<path fill="blue" class="path-two" d="M0 30V0h30"></path>
</svg>
<!-- CSS Code-->
<style>
svg {
background-color: black;
}
</style>
Un site Web pratique pour lire rapidement les images SVG est: https://www.rapidtables.com/web/tools/svg- viewer-editor.html
Faites-en bon usage.
veuillez noter que la hauteur et la largeur sont intrinsèques à la balise SVG, elles fonctionnent quoi qu'il arrive. :)
Vous pouvez obtenir le même résultat en utilisant CSS et il sera plus facile à gérer:
<div class="box"> </div>
.box {
height:60px;
background:
linear-gradient(to top left ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%),
#000;
background-size:60px 100%;
background-repeat:no-repeat;
}
Vous pouvez également l'intégrer comme arrière-plan de votre barre noire:
<div class="box"> </div>
.box {
display:inline-block;
width:150px;
height:150px;
background:
linear-gradient(to top left ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%);
}
test, restez à l'écoute.
Je me demande si vous avez jeté un coup d’œil sur la page Web Je souhaite insérer cette image svg à l’intérieur le bar. J'ai essayé votre code mais cela n'a pas fonctionné. .
@flash essaie d'ajouter ce code CSS et supprime le SVG .breaking-news-slider {background: linear-gradient (en haut à gauche, transparent 49,3%, rgb (147, 200, 61,0.4) 50%) gauche / 150px 100% sans répétition, gradient linéaire (en bas à gauche, transparent 49,3%, # 00afc9 50%) à gauche / 150 px 100% sans répétition, # 000}
Je ne sais pas trop où voulez-vous que je fasse quoi.
@flash vous n'avez plus besoin de SVG ou d'un autre élément pour cette forme .. vérifiez ma dernière modification pour voir que j'ai appliqué l'arrière-plan à votre barre noire. Alors ajoutez simplement le même CSS à votre barre dans votre code
Lorsque vous dites supprimer le svg, où voulez-vous que je le supprime
@flash supprimez-le de votre code, plus besoin car je ferai la même chose en utilisant uniquement l'arrière-plan (vérifiez ma réponse mise à jour)
J'ai supprimé le svg, dans lequel html vous voulez que j'intègre ce css.
@flash la barre arrière ayant la classe breaking-news-slider ajoutez simplement mon dernier code à cet élément
vous voulez dire celui-ci class = "slick-slider-de-nouvelles-slick-initialized slick-slider" id = "js-breaking-news-slider" ?
J'y ai ajouté mais la hauteur n'augmente pas correctement.
@flash montre-moi comment tu l'as ajouté, il n'y a plus de hauteur impliquée puisque c'est un arrière-plan. Avez-vous reçu mon dernier code? il y a deux extraits dans ma réponse (actualisez la page si vous n'en voyez qu'un)
Je vous ferai savoir étape par étape ce que j'ai fait. Je marquerai votre réponse car je pense que cela a fonctionné.
C'est ce que j'ai fait. Faites-moi savoir si c'est ok. .breaking-news-slider {hauteur: 60px; arrière-plan: gradient linéaire (en haut à gauche, transparent 49,3%, rgb (147, 200, 61,0,4) 50%), gradient linéaire (en bas à gauche, transparent 49,3%, # 00afc9 50%), # 000; taille de l'arrière-plan: 60px 100%; background-repeat: pas de répétition; } @media (largeur min .: 48em) {.cpac-rupture> .cpac-icon svg {affichage: aucun! important; }} .cpac-rupture {arrière-plan: aucun! important; }
Je veux vous donner une prime mais il est dit après 16 heures. Je le ferai après 16 heures.