gpt4 book ai didi

javascript - 使用 SVG 在 CSS 中制作自定义图标

转载 作者:行者123 更新时间:2023-12-02 21:56:24 25 4
gpt4 key购买 nike

我正在尝试在 css 文件中使用我自己的图标来在 React 网站上显示图标。下面是我实际创建标记的代码(我正在使用 MapBox API。(参见代码底部)

问题是a.) 当我在 illustrator 中创建自己的 SVG 文件并将它们放入元素目录中或为它们创建链接以供文件引用时,两者都没有出现在我的 map 中。b.) 我找到了别人的图标并使用了它,它可以渲染该图标,但它太大了。

import React from "react";
import mapboxgl, { LngLat } from "mapbox-gl";
import "./GoogleMap.css";

import db from "../../firebaseConfig";
import { Marker } from "react-simple-maps";
var image01 = require("../../assets/droneIcon.png");
var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");

const auth = require("../../auth.json");

mapboxgl.accessToken =
"pk.eyJ1IjoiamVycnkyMDE4IiwiYSI6ImNrNjA1N3d5NTA0Zmwza252OXNpcWpzYWEifQ.lBwSxATvYgUqiyGfIvC3tw";

class GoogleMap extends React.Component {
constructor(props) {
super(props);
this.state = {
lng: 50,
lat: 50,
zoom: 10
};
}

componentDidMount = () => {
const { lng, lat, zoom } = this.state;

var droneList = [];

const map = new mapboxgl.Map({
container: this.mapContainer,
style: "mapbox://styles/mapbox/streets-v9",
center: [lng, lat],
zoom: zoom
});

map.on("move", () => {
const { lng, lat } = map.getCenter();

this.setState({
lng: lng.toFixed(4),
lat: lat.toFixed(4),
zoom: map.getZoom().toFixed(2)
});
});

var el = document.createElement("div");
el.className = 'marker';
el.style.backgroundImage = 'url(https://cdn1.iconfinder.com/data/icons/appliance-1/100/Drone-07-512.png)';
el.style.width = "500px";
el.style.height = "500px";

我尝试创建自己的 SVG,制作一个原始 git 文件以供托管和引用它,但是我找不到任何地方可以将缩小的原始 SVG 文件制作为 javascript 代码的可读图像。我发现别人创建并发布的SVG文件可以放入 map api并成功显示。

我需要1.找到一种显示SVG图像的方法,因为我目前尝试的方法都会导致空白图像,或者只是图像的alpha channel

  • 找到一种方法来简单地调整渲染图标的大小,以便我可以将其保持在必要的像素尺寸,而不会使其对于我的应用程序来说太大。
  • 非常感谢任何帮助,

    谢谢。

    最佳答案

    I need an SVG file for an icon in my code. There are two options for the program to reference that SVG file; either it is stored locally in the program's directory, or it simply looks at a url for it.

    在 CSS 中引用 SVG 时,您可以使用内联数据 URI

    而不是协议(protocol):

    https://

    您需要以 MIME 类型和编码开始数据 URI:

    data:image/svg+xml;utf8,

    但之后,您可以添加 SVG 而无需进行任何更改:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" fill="rgb(188, 187, 187)" /><path d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z" fill="rgb(244, 128, 35)" /></svg>

    工作示例:

    div {
    width: 180px;
    height: 180px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" fill="rgb(188, 187, 187)" /><path d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z" fill="rgb(244, 128, 35)" /></svg>');
    }
    <div></div>

    关于javascript - 使用 SVG 在 CSS 中制作自定义图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59999802/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com