【发布时间】：2017-08-01 21:54:19
【问题描述】：
我需要根据以下几点制作一个矩形：
- 透明白色背景 (80%)
- 渐变边框（来自后端的不同颜色，1px 宽）
- 可以根据文本长度进行缩放
我尝试过使用 SVG，除了第 3 点外，它都能正常工作。
我现在的尝试是使用 3 个 svgs（一个用于左/右半圆，一个用于中间部分并绝对定位它们，但我还不能让它工作。
中间部分不应缩放到 100% 高度，但我对 svg 缩放选项不够熟悉。
我正在使用 React 和 Glamour，但这并不重要。 （由于依赖关系，sn-p 不起作用，但您应该得到问题）
import React from 'react';
import ReactDOM from 'react-dom';
import { css, style, after } from 'glamor';
const SectionTag = ({ className, name, url, height, borderWidth, fontSize, theme, fillColor }) => {
const styles = {
main: {
padding: 0,
display: 'block',
},
inline: style({
display: 'inline-block',
verticalAlign: 'top',
}),
textWrapper: style({
position: 'relative'
}),
background: style({
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: '100%',
}),
text: css({
zIndex: 1,
position: 'relative',
color: theme.accentColor,
fontSize: fontSize,
lineHeight: 1,
textTransform: 'uppercase',
padding: '8px 1px',
height,
margin: 0,
}),
};
return (
<div className={css(className, styles.main)}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={height / 2}
height={height}
viewBox={`0 0 ${height / 2} ${height}`}
className={styles.inline}
>
<rect rx={height / 2} ry={height / 2} x={borderWidth / 2} y={borderWidth / 2}
width={(height * 2) - (borderWidth)}
height={height - (borderWidth)}
style={{
fill: fillColor,
stroke: `url(#gradient-${name.replace(/ /g, '-').toLowerCase()})`,
strokeWidth: borderWidth
}} />
</svg>
<div className={css(styles.textWrapper, styles.inline)}>
<svg
xmlns="http://www.w3.org/2000/svg"
height={height}
viewBox={`0 0 ${height - 4} ${height}`}
className={css(styles.background)}
preserveAspectRatio="xMidYMin slice"
>
<linearGradient id={`gradient-${name.replace(/ /g, '-').toLowerCase()}`}>
<stop offset="0" style={{ stopColor: theme.leftColor }} />
<stop offset="1" style={{ stopColor: theme.rightColor }} />
</linearGradient>
<rect
x={-borderWidth}
y={0}
width={height - (borderWidth * 2)}
height={height - (borderWidth * 2)}
style={{
fill: fillColor,
stroke: `url(#gradient-${name.replace(/ /g, '-').toLowerCase()})`,
strokeWidth: borderWidth,
vectorEffect: 'non-scaling-stroke',
height: height,
top: 0,
padding: 0,
margin: 0,
}} />
</svg>
<p
height={height}
className={css(styles.text, styles.inline)}
>
{name}
</p>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width={height / 2}
height={height}
viewBox={`0 0 ${height / 2} ${height}`}
className={styles.inline}
>
<rect rx={height / 2} ry={height / 2} x={-(height * 1.5)} y={borderWidth / 2}
width={(height * 2) - (borderWidth)}
height={height - (borderWidth)}
style={{
fill: fillColor,
stroke: `url(#gradient-${name.replace(/ /g, '-').toLowerCase()})`,
strokeWidth: borderWidth
}} />
</svg>
</div>
);
};
SectionTag.propTypes = {};
SectionTag.defaultProps = {
name: 'default',
height: 29,
borderWidth: 1,
fontSize: 10,
fillColor: 'rgba(255, 255, 255, .8)',
theme: {
leftColor: 'rgba(255, 188, 0, 0.31)',
rightColor: '#ff0000',
accentColor: '#f9811b'
}
};
const mountNode = document.querySelector('.el');
ReactDOM.render(<SectionTag name="Jane" />, mountNode);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="el"></div>【问题讨论】：