反应 svg 图像

Question

我对React一窍不通，受托做了一个小任务，看着简单，却没能完成。我一直在操纵我认为在网页中创建 svg 图标的代码，这是代码：


            var EuiIconLogoKibana = function EuiIconLogoKibana(props) {
                return _react.default.createElement("svg", _extends({
                    width: 32,
                    height: 32,
                    viewBox: "0 0 32 32",
                    xmlns: "http://www.w3.org/2000/svg"
                }, props), _react.default.createElement("g", {
                    fill: "none",
                    fillRule: "evenodd"
                }, _react.default.createElement("path", {
                    fill: "#F04E98",
                    d: "M4 0v28.789L28.935.017z"
                }), _react.default.createElement("path", {
                    fill: "#00BFB3",
                    d: "M18.479 16.664L6.268 30.754l-1.073 1.237h23.191c-1.252-6.292-4.883-11.719-9.908-15.327"
                })))
            };

我必须更改那个图标，所以我有一个 png 图像，我用 https://convertio.co/ 将那个 png 转换为 svg，我用 vs 代码打开并得到这个 XML:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="758.000000pt" height="758.000000pt" viewBox="0 0 758.000000 758.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,758.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M3570 6184 c-265 ...TOO MANY NUMBERS"/>
<path d="M3595 3162 c-106 ...TOO MANY NUMBERS"/>
</g>
</svg>

所以我想将 SVG 的路径复制到“_react.default.createElement”的路径中将绘制我想要的图像，但是，我无法让它工作...有什么想法我能做些什么来解决这个问题？

Answer 1

"M" 在 SVG 路径上意味着 "move to"，所以我在正确的轨道上，但是我试图绘制的图像太大以适应 space，我开始以 3570 像素绘制，但大小由以下因素决定：

_react.default.createElement("svg", _extends({
                    width: 32,
                    height: 32,
                    viewBox: "0 0 32 32",

我只需要调整绘图的大小就可以了。

也许这对学习或工作的人有用，我不在乎，我分享。不要像 "BBQ" Becky、"Permit" Patty、"Cornerstore" Caroline 或 Mike "Over-React"

反应 svg 图像

React svg image

svg

graphical-logo

reactjs