我有这样的代码：
.img-container {
width: 300px;
height: 300px;
background-color: lightgreen;
overflow: hidden;
}
.clipped-img {
clip-path: url('#header-clip-svg');
}<div class="img-container">
<!--clipping SVG-->
<svg height="0" width="0">
<defs>
<clipPath id="header-clip-svg">
<path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path>
</clipPath>
</defs>
</svg>
<!-- clipped image-->
<img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/>
</div>我想增加剪裁形状尺寸，使其具有彩色绿色区域的宽度。有没有办法做到这一点？
我尝试将 HMR 添加到我的 webpack 5 配置中，但出现了严重错误。第一次正确编译，但在代码更改后重新编译时 - 它以HookWebpackError: Cannot read property 'updatedChunkIds' of undefined. 如果我删除hot: true选项 - 一切正常。
我的配置：
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const ImageminPlugin = require("imagemin-webpack-plugin").default;
const SVGSpritemapPlugin = require("svg-spritemap-webpack-plugin");
const path = require("path");
const fs = require("fs");
const PATHS = {
src: path.join(__dirname, "./src"),
dist: path.join(__dirname, "./dist"),
icons: path.join(__dirname, "./src/assets/icons")
};
const PAGES_PUG = `${PATHS.src}/pug/`;
const PAGES_TO_CONVERT = fs
.readdirSync(PAGES_PUG) …我正在通过 Create React App 在 React 上构建一个本地天气应用程序，我需要根据天气类型动态渲染天气图标。我有这个代码：
import React from 'react';
import { ReactComponent as MistIcon } from 'assets/img/weather/mist.svg';
import { ReactComponent as RainIcon } from 'assets/img/weather/rain.svg';
import { ReactComponent as SnowIcon } from 'assets/img/weather/snow.svg';
const icon = (props) => {
const { weatherType } = props;
const WeatherIconName = `${weatherType}Icon`; //Rain or Snow or Mist etc
return(
<Icon size={'lg'}>
<WeatherIconName/> //here I'm trying to render <MistIcon/> or <SnowIcon/> or <RainIcon/>
</Icon>
);
};
export default icon;
它只是抛出这样的错误：警告：该标签在此浏览器中无法识别。如果您打算渲染 React …
我现在正在学习 SVG，并陷入了径向渐变主题，即精确移动径向渐变中心。比方说，我有 2 个渐变示例（可供使用的 codepen 片段）。一个基本的（完美运行）：
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye"cx="50%" cy="50%" r="10%" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" rx="10%"fill="url(#bullseye)"/>
</svg>fx以及我尝试应用和fy属性来移动渐变焦点的示例：
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye2" cx="50%" cy="50%" r="10%" fx=".2" fy=".2" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" rx="10%"fill="url(#bullseye2)"/>
</svg>在这里，它以某种方式只是切割了一块形状，而不是仅仅移动中心点。
您能否解释一下我在这里做错了什么以及为什么它以如此奇怪的方式工作？