En este artículo, aprenderemos cómo incrustar un SVG en un iframe. Es un elemento HTML que representa contextos de navegación anidados, lo que permite incrustar una página HTML dentro de otra. Tiene muchos atributos, pero aquí discutimos los atributos src y srcdoc para resolver este problema. El atributo iframe src especifica la URL del documento incrustado en el <iframe>.
Nota: Necesitamos estar familiarizados con HTML y CSS para poder resolver este problema.
Sintaxis:
<iframe src="https//www.geeksforgeeks.org/"
title="GeeksforGeeks" width="400" height="300">
</iframe>
Ejemplo 1: En este ejemplo, usaremos el atributo src.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
}
h1,
container {
color: green;
}
</style>
</head>
<body>
<h1 class="container">
GeeksForGeeks
</h1>
<div class="container">
<iframe src=
"https://upload.wikimedia.org/wikipedia/commons/4/43/GeeksforGeeks.svg">
</iframe>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usaremos el atributo srcdoc. Un marco en línea muestra el contenido HTML de la página especificada por el atributo srcdoc. Este atributo toma el contenido HTML de cualquier otra página.
HTML
<html>
<head>
<style>
.container {
display: flex;
justify-content: center;
}
h1,
container {
color: green;
}
</style>
</head>
<body>
<h1 class="container">GeeksForGeeks</h1>
<div class="container">
<iframe srcdoc='<svg xmlns="http://www.w3.org/2000/svg"
width="76.533" height="39.026"
viewBox="0 0 76.533 39.026">
<path d="M2380.7,6597.866a12.252,12.252,0,0,
0-.261-1.513l-30.726-.027a12.545,12.545,0,0,
1,.908-3.443,12.337,12.337,0,0,1,2.739-4.044,
12.151,12.151,0,0,1,4.018-2.581,12.634,12.634,
0,0,1,14.3,3.051l4.852-4.748a18.176,18.176,0,
0,0-6.131-4.331,20.037,20.037,0,0,0-8.112-1.564,
20.25,20.25,0,0,0-7.671,1.459,19.158,19.158,0,
0,0-6.261,4.07,19.584,19.584,0,0,0-4.226,6.184,
18.7,18.7,0,0,0-1.487,5.947h-.2a18.674,18.674,
0,0,0-1.489-5.947,19.544,19.544,0,0,0-4.226-6.184,
19.133,19.133,0,0,0-6.261-4.07,21.354,21.354,0,
0,0-15.783.1,18.2,18.2,0,0,0-6.131,4.331l4.853,
4.748a13.264,13.264,0,0,1,14.3-3.051,12.131,
12.131,0,0,1,4.017,2.581,12.323,12.323,0,0,1,
2.74,4.044,12.527,12.527,0,0,1,.908,
3.443l-30.726.027a12.256,12.256,0,0,0-.261,1.513,
15,15,0,0,0-.1,1.773,20.713,20.713,0,0,0,1.1,
6.783,15.709,15.709,0,0,0,3.443,5.686,17.309,
17.309,0,0,0,6,4.123,20.587,20.587,0,0,0,7.983,
1.46,20.226,20.226,0,0,0,7.669-1.46,19.086,
19.086,0,0,0,6.261-4.07,19.506,19.506,0,0,0,
4.226-6.184,18.163,18.163,0,0,0,
1.153-3.629h.871a18.27,18.27,0,0,0,1.151,
3.629,19.545,19.545,0,0,0,4.226,6.184,19.111,
19.111,0,0,0,6.261,4.07,20.241,20.241,0,0,0,
7.671,1.46,20.572,20.572,0,0,0,7.981-1.46,
17.282,17.282,0,0,0,6-4.123,15.717,15.717,0,
0,0,3.445-5.686,20.726,20.726,0,0,0,
1.1-6.783A15.259,15.259,0,0,0,2380.7,
6597.866Zm-46.245,5.608a12.1,12.1,0,0,1-2.766,
4.043,12.467,12.467,0,0,1-4.043,2.583,14.378,
14.378,0,0,1-9.939.052,11.776,11.776,0,0,
1-3.522-2.218,8.459,8.459,0,0,1-1.8-2.374,13.476,
13.476,0,0,1-1.173-3.208l23.658,0A11.487,11.487,
0,0,1,2334.457,6603.475Zm38.236,2.086a8.466,
8.466,0,0,1-1.8,2.374,11.771,11.771,0,0,1-3.522,
2.218,14.378,14.378,0,0,1-9.939-.052,12.491,
12.491,0,0,1-4.044-2.583,12.088,12.088,0,0,
1-2.765-4.043,11.427,11.427,0,0,
1-.415-1.126h11.92v0h11.739A13.509,13.509,
0,0,1,2372.692,6605.561Z"
transform="translate(-2304.273 -6578.666)"
fill="#2f8d46"></path></svg>'>
</iframe>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA