Реагируйте на изображение SVG - PullRequest
Новая
       13

Реагируйте на изображение SVG

0 голосов
/ 25 марта 2020

Я ничего не знаю о 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, я преобразовал этот PNG в SVG с https://convertio.co/, я открыл с кодом против и получить это 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 "нарисует изображение, которое я хочу, но я не могу заставить его работать ... какие-либо идеи о том, что я могу сделать, чтобы решить эту проблему?

1 Ответ

0 голосов
/ 26 марта 2020

«M» на SVG Path означает «двигаться к», поэтому я был на правильном пути, но изображение, которое я пытался нарисовать, было слишком большим, чтобы соответствовать пространству, я начал рисовать с разрешением 3570 пикселей, но размер был определен следующим образом: 

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

Мне просто нужно изменить размер чертежа, и он работает.

Может быть, это будет полезно для кого-то, обучающегося или работающего, мне все равно, я делюсь. не будь как "БАРБЕКЮ" Бекки, "Разрешить" Пэтти, "Корнерстор" Кэролайн или Майка "Сверхреагировать"

...