[英]Making custom icons in CSS using SVG
我正在嘗試在 css 文件中使用我自己的圖標在 React 網站上顯示圖標。 下面是導致我實際創建標記的代碼(我使用的是 MapBox API。(見代碼底部)
問題是 a.) 當我在 illustrator 中創建自己的 SVG 文件並將它們放在項目目錄中或為它們創建鏈接以供文件參考時,它們都不會出現在我的地圖中。 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文件可以放入地圖api並成功顯示。
我需要 1. 找到一種顯示 SVG 圖像的方法,因為我一直在嘗試的當前方法導致空白圖像,或者只是圖像的 alpha 通道
很感謝任何形式的幫助,
謝謝你。
我的代碼中的圖標需要一個 SVG 文件。 程序有兩個選項可以引用該 SVG 文件; 它要么本地存儲在程序的目錄中,要么只是查看它的 url。
在 CSS 中引用 SVG 時,您可以使用內聯數據 URI 。
而不是協議:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.