我正在使用名词项目中的一些SVG
做作业,但是当我输入SVG
的代码时,它可以在w3-school
上使用,但不能在我的web page
中使用
请参阅下面的代码(警告我确实复制并粘贴了SVG
代码,因此看起来可能很长)
我下载了SVG
张图片,并在记事本中将其打开,然后复制了xml
我在Google上搜索了使用方法或要复制的内容,但所得到的只是在文本编辑器中将其打开并进行复制和粘贴
主体限制为30000,所以我将删除一些SVG
,我将添加图像链接;
a。 Fruit
b。 Dairy
c。 Beverage
d。 Pastae。 Dessert
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Coding Project</title>
</head>
<body>
<script>
let groceries = [
{
category: "fruit",
item: "apples",
type: "Honey Crisp",
brand: "Little cuties",
qty: 10
},
{
category: "beverage",
item: "milk",
type: "2%",
brand: "generic",
qty: "1 gallon"
},
{
category: "pasta",
item: "Pasta",
type: "Penne",
brand: "Barilla",
qty: 3
},
{
category: "dessert",
item: "Gelatin dessert",
type: "Green",
brand: "Jello",
qty: 3
},
{
category: "dairy",
item: "Yogurt",
type: "Assorted flavors",
brand: "Chobani",
qty: 12
},
{
category: "pasta",
item: "Pasta",
type: "Linguini",
brand: "Barilla",
qty: 3
},
{
category: "beverage",
item: "Apple juice",
type: "regular",
brand: "Happy Farms",
qty: 2
},
{
category: "beverage",
item: "Vodka",
type: "Tangerine",
brand: "Grey Goose",
qty: 1
}
];
$.each(groceries, function(i, item){
let paragraph = $("<p>"),
imgSrc = '';
switch(item.category) {
case 'fruit':
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/"
xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/"
xmlns:graph="http://ns.adobe.com/Graphs/1.0/"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;"
xml:space="preserve"><switch><foreignObject
requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"/><g i:extraneous="self">
<g><path d="M89.4,28.9c-5.2-6.6-13.2-9.8-22.5-9c-5.3,0.4-10.4,1.8-14.9,3.9c0.6-7.1-0.6-17.3-10.8-20.9c-4.9-1.7-7,5.2-3.9,6
c6.4,1.7,9.3,6.9,10.1,14.6c-4.4-1.9-9.3-3.2-14.4-3.6c-9.4-0.7-17.4,2.5-22.5,9c-6.7,8.5-7.8,21.7-3.1,36.2
c7.5,23.1,21.3,35,36.9,31.9c1.9-0.4,3.8-1,5.7-1.9c1.9,0.9,3.8,1.5,5.7,1.9c1.6,0.3,3.3,0.5,4.9,0.5c13.5,0,25.2-11.7,32-32.4
C97.3,50.6,96.1,37.4,89.4,28.9z M85.6,62.8c-2.3,7.2-11.3,30.5-28.5,27c-1.8-0.4-3.6-1-5.4-2c-0.5-0.3-1.2-0.4-1.8-0.4
s-1.2,0.1-1.8,0.4c-1.8,1-3.6,1.7-5.4,2c-17.1,3.5-26.1-19.8-28.5-27c-4-12.1-3.3-22.9,1.9-29.5c3.7-4.6,9.3-6.8,16.2-6.3
c5.7,0.4,11.1,2.1,15.6,4.8c1.2,0.7,2.6,0.7,3.8,0c4.5-2.7,9.8-4.4,15.6-4.8c7-0.5,12.6,1.6,16.2,6.3
C88.9,40,89.6,50.7,85.6,62.8z"/>
<path d="M41.2,49.6c-1.6-0.8-5.5-1.6-8.1,3.8c-2.6,5.5-0.9,11.5,0.5,12.2c1.5,0.7,7.2-1.8,9.8-7.3C46,52.9,42.8,50.4,41.2,49.6z"/>
<path d="M58.8,49.6c-1.6,0.8-4.8,3.3-2.2,8.7c2.6,5.5,8.3,8,9.8,7.3c1.5-0.7,3.1-6.7,0.5-12.2C64.3,48,60.4,48.9,58.8,49.6z"/>
</g></g>
</switch><text x="0" y="115" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">
Created by Adrien Coquet</text><text x="0" y="120" fill="#000000" font-size="5px" font-weight="bold"
font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text>
</svg>
break;
case 'beverage':
<svg xmlns="http://www.w3.org/2000/svg" xmlns:
xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 64 80" style="enable-background:new 0 0 64 64;"
xml:space="preserve"><rect x="34" y="40" width="2" height="2"/><rect x="38" y="42" width="2" height="2"/>
<path d="M33,51c-2.206,0-4,1.57-4,3.5s1.794,3.5,4,3.5s4-1.57,4-3.5S35.206,51,33,51z M33,56c-1.084,0-2-0.687-2-1.5
s0.916-1.5,2-1.5s2,0.687,2,1.5S34.084,56,33,56z"/>
<path d="M46,7c-0.16,0-16,0.108-16,4v4c0,0.229,0.059,0.445,0.163,0.648l1.293,20.576c-1.934,0.159-3.777,0.409-5.455,0.747V32v-6
v-5c0-0.143-0.03-0.284-0.09-0.414l-4.476-9.846C21.787,10.248,22,9.65,22,9V5c0-1.654-1.346-3-3-3H9C7.346,2,6,3.346,6,5v4
c0,0.65,0.213,1.248,0.565,1.74L2.09,20.586C2.03,20.716,2,20.857,2,21v5v6v21c0,3.859,3.141,7,7,7h10
c0.784,0,1.55-0.135,2.287-0.392C24.888,61.238,30.955,62,37,62c8.996,0,18.051-1.684,18.915-5.415C55.966,56.392,56,56.197,56,56
v-6.858V49h3c0.529,0,0.968-0.413,0.998-0.941l1.899-32.56C61.958,15.339,62,15.175,62,15v-4C62,7.108,46.16,7,46,7z M60,13.074
v1.765c-0.025,0.027-0.054,0.054-0.088,0.081c-0.029,0.023-0.056,0.045-0.091,0.068c-0.054,0.035-0.119,0.071-0.187,0.108
c-0.044,0.023-0.086,0.046-0.135,0.07c-0.077,0.037-0.166,0.074-0.257,0.111c-0.059,0.024-0.115,0.048-0.18,0.072
c-0.098,0.037-0.208,0.074-0.319,0.111c-0.074,0.025-0.146,0.049-0.225,0.074c-0.118,0.036-0.247,0.073-0.376,0.109
c-0.089,0.025-0.175,0.05-0.269,0.075c-0.134,0.035-0.28,0.07-0.424,0.106c-0.104,0.025-0.206,0.051-0.315,0.076
c-0.15,0.034-0.31,0.068-0.469,0.101c-0.119,0.025-0.234,0.05-0.358,0.075c-0.162,0.032-0.334,0.063-0.504,0.094
c-0.134,0.025-0.265,0.05-0.404,0.074c-0.173,0.03-0.356,0.058-0.536,0.087c-0.149,0.024-0.294,0.048-0.448,0.071
c-0.183,0.027-0.375,0.052-0.564,0.078c-0.162,0.022-0.32,0.045-0.486,0.066c-0.2,0.025-0.408,0.048-0.614,0.072
c-0.165,0.019-0.326,0.039-0.494,0.057c-0.216,0.023-0.439,0.043-0.661,0.064c-0.169,0.016-0.335,0.033-0.508,0.048
c-0.219,0.019-0.446,0.034-0.67,0.05c-0.183,0.013-0.362,0.028-0.548,0.04c-0.243,0.016-0.493,0.027-0.742,0.04
c-0.17,0.009-0.338,0.02-0.51,0.027c-0.291,0.013-0.587,0.021-0.883,0.029c-0.138,0.004-0.273,0.01-0.411,0.013
C46.886,16.995,46.445,17,46,17c-0.445,0-0.887-0.005-1.323-0.015c-0.117-0.003-0.232-0.008-0.348-0.011
c-0.318-0.009-0.637-0.018-0.949-0.032c-0.119-0.005-0.234-0.013-0.352-0.019c-0.306-0.015-0.612-0.03-0.912-0.05
c-0.101-0.007-0.198-0.015-0.299-0.022c-0.313-0.022-0.625-0.044-0.928-0.07c-0.072-0.006-0.141-0.014-0.213-0.02
c-0.328-0.029-0.654-0.06-0.97-0.093c-0.042-0.005-0.082-0.01-0.124-0.014c-0.34-0.037-0.675-0.076-1-0.117
c-0.023-0.003-0.045-0.006-0.069-0.009c-3.521-0.455-6.027-1.153-6.514-1.701v-1.753c0.026,0.011,0.057,0.021,0.083,0.032
c0.212,0.09,0.437,0.175,0.673,0.257c0.061,0.021,0.121,0.043,0.184,0.064c0.265,0.087,0.54,0.17,0.828,0.248
c0.062,0.017,0.125,0.032,0.188,0.048c0.256,0.067,0.518,0.13,0.787,0.19c0.063,0.014,0.125,0.029,0.189,0.043
c0.31,0.067,0.628,0.129,0.95,0.187c0.08,0.015,0.161,0.028,0.242,0.042c0.291,0.05,0.584,0.098,0.88,0.143
c0.05,0.007,0.099,0.016,0.148,0.023c0.334,0.049,0.669,0.093,1.005,0.135c0.087,0.011,0.174,0.021,0.261,0.032
c0.328,0.039,0.656,0.076,0.98,0.109c0.02,0.002,0.039,0.004,0.058,0.006c0.329,0.033,0.653,0.063,0.973,0.09
c0.081,0.007,0.161,0.014,0.242,0.021c0.316,0.026,0.626,0.05,0.927,0.071c0.05,0.004,0.097,0.006,0.146,0.01
c0.269,0.018,0.53,0.035,0.783,0.049c0.065,0.004,0.13,0.008,0.193,0.011c0.276,0.015,0.54,0.029,0.79,0.04
c0.053,0.002,0.101,0.004,0.153,0.007c0.219,0.01,0.427,0.018,0.621,0.025c0.038,0.001,0.078,0.003,0.115,0.004
c0.214,0.008,0.407,0.013,0.583,0.018c0.044,0.001,0.08,0.002,0.121,0.003c0.158,0.004,0.302,0.007,0.421,0.01
c0.005,0,0.012,0,0.017,0c0.125,0.002,0.22,0.004,0.295,0.005c0.033,0,0.048,0.001,0.071,0.001C45.958,15,45.994,15,46,15
s0.042,0,0.092-0.001c0.023,0,0.038,0,0.071-0.001c0.075-0.001,0.17-0.002,0.295-0.005c0.005,0,0.012,0,0.017,0
c0.119-0.002,0.263-0.006,0.421-0.01c0.041-0.001,0.078-0.002,0.121-0.003c0.176-0.005,0.369-0.011,0.583-0.018
c0.038-0.001,0.077-0.003,0.116-0.004c0.194-0.007,0.401-0.016,0.62-0.025c0.052-0.002,0.1-0.004,0.153-0.007
c0.25-0.012,0.514-0.025,0.79-0.04c0.064-0.004,0.128-0.007,0.193-0.011c0.253-0.015,0.513-0.031,0.783-0.049
c0.049-0.003,0.096-0.006,0.146-0.01c0.301-0.021,0.611-0.045,0.927-0.071c0.08-0.007,0.161-0.014,0.242-0.021
c0.32-0.028,0.644-0.057,0.973-0.09c0.019-0.002,0.039-0.004,0.058-0.006c0.324-0.033,0.652-0.07,0.98-0.109
c0.087-0.01,0.174-0.021,0.261-0.032c0.336-0.042,0.671-0.086,1.005-0.135c0.05-0.007,0.099-0.016,0.149-0.023
c0.296-0.044,0.589-0.092,0.879-0.143c0.081-0.014,0.162-0.028,0.243-0.042c0.322-0.058,0.64-0.12,0.95-0.187
c0.064-0.014,0.126-0.029,0.189-0.043c0.269-0.06,0.532-0.123,0.787-0.19c0.062-0.016,0.126-0.032,0.188-0.048
c0.287-0.078,0.563-0.161,0.828-0.248c0.063-0.021,0.123-0.042,0.184-0.064c0.235-0.082,0.461-0.167,0.673-0.257
C59.943,13.095,59.974,13.085,60,13.074z M59.809,10.999c-0.005,0.003-0.006,0.006-0.011,0.009
c-0.018,0.011-0.044,0.023-0.063,0.034c-0.078,0.046-0.162,0.092-0.263,0.139c-0.035,0.016-0.078,0.032-0.115,0.049
c-0.099,0.043-0.2,0.085-0.316,0.129c-0.049,0.018-0.106,0.036-0.158,0.055c-0.118,0.041-0.239,0.083-0.373,0.124
c-0.063,0.019-0.133,0.039-0.199,0.058c-0.136,0.04-0.276,0.08-0.425,0.12c-0.077,0.02-0.158,0.04-0.238,0.06
c-0.152,0.038-0.308,0.077-0.472,0.114c-0.09,0.021-0.184,0.041-0.278,0.062c-0.168,0.037-0.339,0.073-0.517,0.109
c-0.102,0.02-0.206,0.04-0.311,0.06c-0.181,0.035-0.366,0.069-0.556,0.102c-0.115,0.02-0.231,0.04-0.349,0.059
c-0.192,0.032-0.39,0.063-0.591,0.094c-0.126,0.019-0.252,0.038-0.381,0.057c-0.202,0.029-0.409,0.057-0.618,0.084
c-0.138,0.018-0.276,0.036-0.417,0.053c-0.211,0.026-0.427,0.05-0.645,0.074c-0.148,0.016-0.294,0.033-0.445,0.048
c-0.22,0.022-0.445,0.043-0.671,0.063c-0.156,0.014-0.31,0.029-0.468,0.042c-0.231,0.019-0.468,0.036-0.704,0.052
c-0.159,0.011-0.315,0.023-0.476,0.033c-0.248,0.015-0.501,0.028-0.754,0.04c-0.156,0.008-0.309,0.017-0.466,0.023
c-0.279,0.012-0.564,0.02-0.848,0.028c-0.135,0.004-0.268,0.009-0.403,0.012C46.856,12.995,46.43,13,46,13s-0.856-0.005-1.278-0.014 c-0.136-0.003-0.268-0.009-0.403-0.012c-0.284-0.008-0.568-0.016-0.848-0.028c-0.157-0.007-0.31-0.016-0.466-0.023 c-0.253-0.013-0.506-0.025-0.754-0.04c-0.161-0.01-0.318-0.022-0.476-0.033c-0.236-0.017-0.472-0.033-0.703-0.052 c-0.158-0.013-0.313-0.028-0.468-0.042c-0.225-0.02-0.451-0.041-0.67-0.063c-0.15-0.015-0.297-0.032-0.445-0.048 c-0.217-0.024-0.434-0.048-0.645-0.074c-0.141-0.017-0.279-0.035-0.417-0.053c-0.209-0.027-0.416-0.055-0.618-0.084 c-0.129-0.018-0.255-0.037-0.381-0.057c-0.201-0.031-0.398-0.062-0.591-0.094c-0.118-0.02-0.234-0.039-0.349-0.059 c-0.19-0.033-0.376-0.067-0.556-0.102c-0.105-0.02-0.209-0.04-0.311-0.06c-0.178-0.036-0.35-0.072-0.517-0.109 c-0.094-0.02-0.188-0.041-0.278-0.062c-0.164-0.038-0.32-0.076-0.472-0.114c-0.08-0.02-0.162-0.04-0.239-0.061 c-0.149-0.04-0.288-0.079-0.424-0.119c-0.067-0.02-0.136-0.039-0.2-0.059c-0.134-0.041-0.255-0.083-0.373-0.124 c-0.052-0.018-0.109-0.036-0.158-0.055c-0.117-0.043-0.218-0.086-0.316-0.129c-0.037-0.016-0.081-0.033-0.115-0.049 c-0.101-0.047-0.185-0.093-0.263-0.139c-0.019-0.011-0.045-0.023-0.063-0.034c-0.005-0.003-0.006-0.006-0.011-0.009 C33.554,10.126,39.347,9,46,9S58.446,10.126,59.809,10.999z M32.582,38.148C34.058,38.05,35.544,38,37,38 c0.689,0,1.356,0.01,2.004,0.028C39.023,40.221,41.255,42,44,42c2.232,0,4.104-1.184,4.745-2.802C52.242,40.059,54,41.203,54,42
c0,1.436-5.681,4-17,4c-0.76,0-1.489-0.013-2.198-0.035C34.928,45.653,35,45.331,35,45c0-2.28-3.01-4-7-4
c-3.019,0-5.486,0.989-6.496,2.475c-0.53-0.281-0.921-0.56-1.169-0.825c-0.039-0.077-0.072-0.158-0.13-0.225l-0.029,0.022
c-0.002-0.003-0.004-0.005-0.005-0.008l0.025-0.027c-0.026-0.032-0.062-0.048-0.091-0.077c-0.014-0.042-0.009-0.086-0.029-0.127 c-0.005-0.011-0.014-0.026-0.024-0.045c-0.006-0.011-0.013-0.023-0.02-0.036C20.021,42.086,20,42.041,20,42 c0-0.053,0.024-0.11,0.039-0.165c0.237-0.597,1.703-1.638,5.201-2.504c0.158-0.039,0.29-0.124,0.407-0.225 c1.851-0.429,4.16-0.775,6.921-0.959C32.573,38.146,32.577,38.149,32.582,38.148z M45.239,38.537c0.094,0.013,0.19,0.026,0.282,0.04 c0.332,0.049,0.656,0.103,0.976,0.158c0.086,0.015,0.171,0.03,0.255,0.046C46.286,39.49,45.214,40,44,40 c-1.565,0-2.896-0.849-2.994-1.879C42.503,38.21,43.916,38.351,45.239,38.537z M51,53c0-1.654,1.346-3,3-3v6 C52.346,56,51,54.654,51,53z M32.417,45.842c-0.349-0.024-0.701-0.048-1.035-0.077c-0.162-0.014-0.32-0.031-0.48-0.046 c-0.36-0.035-0.711-0.072-1.053-0.112c-0.149-0.017-0.298-0.035-0.445-0.053c-0.987-0.126-1.901-0.272-2.733-0.436 c-0.016-0.003-0.033-0.007-0.049-0.01c-1.238-0.246-2.295-0.53-3.186-0.828C24.167,43.625,25.803,43,28,43c3.052,0,5,1.185,5,2 C33,45.259,32.79,45.557,32.417,45.842z M20,49c0.552,0,1,0.448,1,1s-0.448,1-1,1V49z M4,27h4.81c0.356,0,0.687-0.19,0.865-0.499 C10.567,24.958,12.225,24,14,24s3.433,0.958,4.325,2.501C18.504,26.81,18.834,27,19.19,27H24v4h-4.81 c-0.356,0-0.687,0.19-0.865,0.499C17.433,33.042,15.775,34,14,34s-3.433-0.958-4.325-2.501C9.496,31.19,9.166,31,8.81,31H4V27z M8,5 c0-0.552,0.448-1,1-1h10c0.552,0,1,0.448,1,1v4c0,0.358-0.199,0.657-0.481,0.834C19.389,9.919,19.223,10,19,10H9 c-0.223,0-0.389-0.081-0.519-0.166C8.199,9.657,8,9.358,8,9V5z M8.235,11.899c0.019,0.005,0.039,0.003,0.058,0.008 C8.521,11.963,8.756,12,9,12h10c0.244,0,0.479-0.037,0.706-0.093c0.019-0.005,0.039-0.003,0.058-0.008L24,21.217V25h-4.262 c-1.302-1.864-3.449-3-5.738-3s-4.437,1.136-5.738,3H4v-3.783L8.235,11.899z M4,53V33h4.262c1.302,1.864,3.449,3,5.738,3 s4.437-1.136,5.738-3H24v4.434c-3.185,0.87-5.43,2.152-5.9,3.882C18.034,41.538,18,41.766,18,42v6v4v4 c0,0.211,0.036,0.417,0.09,0.619c0.031,0.126,0.079,0.248,0.128,0.37c0.013,0.03,0.026,0.059,0.041,0.089 c0.145,0.323,0.341,0.633,0.61,0.922H9C6.243,58,4,55.757,4,53z M22.23,57.822c-0.092-0.109-0.2-0.205-0.334-0.267 c-1.195-0.554-1.727-1.067-1.859-1.399C20.023,56.104,20,56.05,20,56v-3c1.654,0,3-1.346,3-3s-1.346-3-3-3v-2.068 c0.118,0.075,0.251,0.146,0.378,0.219c0.064,0.036,0.124,0.074,0.19,0.11c0.283,0.153,0.586,0.3,0.908,0.439 c0.062,0.027,0.129,0.051,0.192,0.078c0.274,0.114,0.56,0.223,0.858,0.328c0.099,0.035,0.197,0.069,0.298,0.103 c0.334,0.111,0.68,0.218,1.04,0.319c0.039,0.011,0.075,0.023,0.114,0.034c0.404,0.111,0.825,0.213,1.257,0.311 M39,23c3.309,0,6,2.691,6,6C41.691,29,39,26.309,39,23z M53,23 c0,3.309-2.691,6-6,6C47,25.691,49.691,23,53,23z"/><text x="0" y="79" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Becris</text><text x="0" y="84" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text>
</svg>
break;
case 'desert':
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;"
xml:space="preserve"><style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
</style><path d="M37.21,57.46c0.084-0.546-0.291-1.056-0.837-1.14l-1.223-0.188c-0.549-0.082-1.057,0.291-1.14,0.837 c-0.084,0.546,0.291,1.056,0.837,1.14l1.223,0.188c0.051,0.008,0.103,0.012,0.152,0.012C36.708,58.309,37.135,57.955,37.21,57.46z"/><path d="M66.679,61.303c0.485,0,0.912-0.354,0.987-0.849c0.084-0.546-0.291-1.057-0.837-1.14l-1.224-0.188 c-0.547-0.086-1.057,0.291-1.14,0.837c-0.084,0.546,0.291,1.057,0.837,1.14l1.224,0.188C66.577,61.299,66.629,61.303,66.679,61.303z "/><path d="M37.836,60.662c-0.354-0.423-0.984-0.482-1.408-0.127c-0.424,0.354-0.48,0.984-0.127,1.408l0.812,0.972 c0.198,0.237,0.481,0.359,0.769,0.359c0.226,0,0.453-0.076,0.64-0.232c0.424-0.354,0.48-0.984,0.127-1.408L37.836,60.662z"/><path d="M78.408,58.495c-0.424,0.354-0.48,0.984-0.127,1.408l0.812,0.972c0.198,0.237,0.481,0.359,0.769,0.359 c0.226,0,0.453-
</svg>
break;
}
paragraph.append('<img src="'+ imgSrc +'" width="100"><br/>');
$.each(item, function(j, property) {
paragraph.append('<b>' + j + ':</b> ' + property + '<br />')
});
$("body").append(paragraph)
});
</script>
</body>
</html>