使用css设置元素的最大宽度

时间：2017-10-02 17:33:33

标签： html css

我正在尝试设置元素的最大宽度。

我有一个带有x和y轴的图表。我希望y轴标签的宽度是固定的。

我尝试使用最大宽度设置它，但它似乎不起作用..

感谢任何帮助。

在我的css中，我尝试将该特定类的最大宽度设置为以下内容：

.red-y-axis-labels-522 {
  max-width: 20px !important;
  max-height: 5px !important;
}

text {
  fill: rgb(0, 150, 0) !important;
}

enter image description here 

<svg height="210" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; cursor: default; 
    position: relative; left: -0.6px; top: -0.2px; background-color: rgb(255, 255, 255);">
    <desc>framework 3.3.1.sr1.19666</desc><defs>
    <linearGradient id="50290-rgba_204_204_204_1_:0-rgba_255_255_255_1_:100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0" gradientTransform="matrix(1,0,0,1,0,0)"><stop offset="0%" stop-color="#cccccc" stop-opacity="1"></stop><stop offset="100%" stop-color="#ffffff" stop-opacity="1"></stop></linearGradient><clipPath id="D36EC035-8489-4DE3-88F9-FAE3ECE26D6E"><rect x="67" y="15" width="418" height="118" transform="matrix(1,0,0,1,0,0)"></rect></clipPath><linearGradient id="61390-rgba_255_230_230_1_:0-rgba_255_230_230_1_:30-rgba_255_245_245_1_:60-rgba_255_230_230_1_:90-rgba_255_230_230_1_:100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0" gradientTransform="matrix(1,0,0,1,0,0)"><stop offset="0%" stop-color="#ffe6e6" stop-opacity="1"></stop><stop offset="30%" stop-color="#ffe6e6" stop-opacity="1"></stop><stop offset="60%" stop-color="#fff5f5" stop-opacity="1"></stop><stop offset="90%" stop-color="#ffe6e6" stop-opacity="1"></stop><stop offset="100%" stop-color="#ffe6e6" stop-opacity="1"></stop></linearGradient><linearGradient id="61690-rgba_255_102_102_1_:0-rgba_255_102_102_1_:30-rgba_255_194_194_1_:60-rgba_255_102_102_1_:90-rgba_255_102_102_1_:100" x1="0" y1="1" x2="6.123233995736766e-17" y2="0" gradientTransform="matrix(1,0,0,1,0,0)"><stop offset="0%" stop-color="#ff6666" stop-opacity="1"></stop><stop offset="30%" stop-color="#ff6666" stop-opacity="1"></stop><stop offset="60%" stop-color="#ffc2c2" stop-opacity="1"></stop><stop offset="90%" stop-color="#ff6666" stop-opacity="1"></stop><stop offset="100%" stop-color="#ff6666" stop-opacity="1"></stop></linearGradient></defs><g class="red-background-483"><rect x="0.5" y="0.5" width="499" height="209" r="0" rx="0" ry="0" fill="#eeeeee" stroke="#767575" stroke-opacity="0.5" stroke-width="1" fill-opacity="0.5" style=""></rect></g><g class="red-canvas-506"><rect x="66" y="14" width="420" height="120" r="0" rx="0" ry="0" fill="none" stroke="#545454" stroke-width="2" stroke-opacity="1" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="67" y="15" width="418" height="118" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" stroke-width="0.000001" fill-opacity="1" style=""></rect></g><g class="red-axisbottom-509"><g class="red-x-axis-bands-512"></g><g class="red-y-axis-bands-518"><rect x="67" y="103.5" width="418" height="14.75" r="0" rx="0" ry="0" fill="#eeeeee" stroke="#000" fill-opacity="0.5" stroke-width="0.000001" style=""></rect><rect x="67" y="74" width="418" height="14.75" r="0" rx="0" ry="0" fill="#eeeeee" stroke="#000" fill-opacity="0.5" stroke-width="0.000001" style=""></rect><rect x="67" y="44.5" width="418" height="14.75" r="0" rx="0" ry="0" fill="#eeeeee" stroke="#000" fill-opacity="0.5" stroke-width="0.000001" style=""></rect><rect x="67" y="14.999999999999986" width="418" height="14.75" r="0" rx="0" ry="0" fill="#eeeeee" stroke="#000" fill-opacity="0.5" stroke-width="0.000001" style=""></rect></g><g class="red-y-axis-bands-524"></g><g class="red-x-axis-lines-514"></g><g class="red-y-axis-lines-520"><path fill="none" stroke="#999999" d="M67,118.5L485,118.5" stroke-opacity="0.4" stroke-width="1" shape-rendering="crispEdges" style="shape-rendering: crispEdges;"></path><path fill="none" stroke="#999999" d="M67,104.5L485,104.5" style="shape-rendering: crispEdges;" stroke-opacity="0.4" stroke-width="1" shape-rendering="crispEdges"></path><path fill="none" stroke="#999999" d="M67,89.5L485,89.5" stroke-opacity="0.4" stroke-width="1" shape-rendering="crispEdges" style="shape-rendering: crispEdges;"></path><path fill="none" stroke="#999999" d="M67,74.5L485,74.5" style="shape-rendering: crispEdges;" stroke-opacity="0.4" stroke-width="1" shape-rendering="crispEdges"></path><path fill="none" stroke="#999999" d="M67,59.5L485,59.5" stroke-opacity="0.4" stroke-width="1" shape-rendering="crispEdges" style="shape-rendering: crispEdges;"></path><path fill="none" stroke="#999999" d="M67,45.5L485,45.5" stroke-opacity="0.4" stroke-width="1" shape-rendering="crispEdges" style="shape-rendering: crispEdges;"></path><path fill="none" stroke="#999999" d="M67,30.5L485,30.5" style="shape-rendering: crispEdges;" stroke-opacity="0.4" stroke-width="1" shape-rendering="crispEdges"></path></g><g class="red-y-axis-lines-526"></g><g class="red-x-axis-labels-516"><text x="88.16666666666667" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,-50.8333,227.1667)"><tspan dy="-3.296875" x="88.16666666666667">Jan</tspan></text><text x="123" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,-16,262)"><tspan dy="-3.296875" x="123">Feb</tspan></text><text x="157.83333333333334" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,18.8333,296.8333)"><tspan dy="-3.296875" x="157.83333333333334">Mar</tspan></text><text x="192.66666666666669" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,53.6667,331.6667)"><tspan dy="-3.296875" x="192.66666666666669">Apr</tspan></text><text x="227.5" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,88.5,366.5)"><tspan dy="-3.296875" x="227.5">May</tspan></text><text x="262.33333333333337" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,123.3333,401.3333)"><tspan dy="-3.296875" x="262.33333333333337">Jun</tspan></text><text x="297.1666666666667" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,158.1667,436.1667)"><tspan dy="-3.296875" x="297.1666666666667">Jul</tspan></text><text x="332" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,193,471)"><tspan dy="-3.296875" x="332">Aug</tspan></text><text x="366.83333333333337" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,227.8333,505.8333)"><tspan dy="-3.296875" x="366.83333333333337">Sep</tspan></text><text x="401.6666666666667" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,262.6667,540.6667)"><tspan dy="-3.296875" x="401.6666666666667">Oct</tspan></text><text x="436.5" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,297.5,575.5)"><tspan dy="-3.296875" x="436.5">Nov</tspan></text><text x="471.33333333333337" y="139" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(0,-1,1,0,332.3333,610.3333)"><tspan dy="-3.296875" x="471.33333333333337">Dec</tspan></text></g>
    <g class="red-y-axis-labels-522"><text x="63" y="133" text-anchor="end" stroke="none" fill="#000000" 
    style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px"
    transform="matrix(1,0,0,1,0,0)">
    <tspan dy="4.390625" x="63">0</tspan></text><text x="63" y="103.5" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(1,0,0,1,0,0)"><tspan dy="4.390625" x="63">3.25M</tspan></text><text x="63" y="74" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(1,0,0,1,0,0)"><tspan dy="4.390625" x="63">6.5M</tspan></text><text x="63" y="29.749999999999986" text-anchor="end" stroke="none" fill="#000000" style="text-anchor: end; font-family: Verdana; font-size: 11px;" font-family="Verdana" font-size="11px" transform="matrix(1,0,0,1,0,0)"><tspan dy="4.390624999999986" x="63">11.375M</tspan></text></g><g class="red-y-axis-labels-528"></g><g class="red-axis-name-529"></g></g><g class="red-dataset-484"><g class="red-columns-557" clip-path="url('https://localhost:44321/app_Member/sustainPlant.aspx?companyName=Chicago&amp;theYear=2016&amp;zone=AZ#D36EC035-8489-4DE3-88F9-FAE3ECE26D6E')" style=""><rect x="70.5" y="29.5" width="14" height="104" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="105.5" y="30.5" width="14" height="103" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="140.5" y="39.5" width="14" height="94" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="174.5" y="58.5" width="14" height="75" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="209.5" y="62.5" width="14" height="71" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="244.5" y="71.5" width="14" height="62" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="279.5" y="70.5" width="14" height="63" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="314.5" y="65.5" width="14" height="68" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="349.5" y="74.5" width="14" height="59" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="383.5" y="59.5" width="14" height="74" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="418.5" y="57.5" width="14" height="76" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="453.5" y="47.5" width="14" height="86" r="0" rx="0" ry="0" fill="#ffe6e6" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="84.5" y="79.5" width="14" height="54" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="119.5" y="85.5" width="14" height="48" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="154.5" y="70.5" width="14" height="63" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="188.5" y="54.5" width="14" height="79" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="223.5" y="68.5" width="14" height="65" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="258.5" y="63.5" width="14" height="70" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="293.5" y="73.5" width="14" height="60" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="328.5" y="70.5" width="14" height="63" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="363.5" y="70.5" width="14" height="63" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="397.5" y="50.5" width="14" height="83" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="432.5" y="56.5" width="14" height="77" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect><rect x="467.5" y="17.5" width="14" height="116" r="0" rx="0" ry="0" fill="#ff6666" stroke="#333333" fill-opacity="1" stroke-opacity="1" stroke-width="1" stroke-dasharray="5,4" stroke-linejoin="miter" style="stroke-linejoin: miter;"></rect></g></g><g class="red-axistop-510"><g class="red-x-axis-bands-511"></g><g class="red-y-axis-bands-517"></g><g class="red-y-axis-bands-523"></g><g class="red-x-axis-lines-513"></g><g class="red-y-axis-lines-519"></g><g class="red-y-axis-lines-525"></g><g class="red-x-axis-labels-515"></g><g class="red-y-axis-labels-521"></g><g class="red-y-axis-labels-527"></g></g><g class="red-datalabels-505" style=""></g><g class="red-legend-606" transform="matrix(1,0,0,1,191.5,169.5)"><rect x="0" y="0" width="170" height="26" r="0" rx="0" ry="0" fill="none" stroke="#404040" stroke-opacity="0.05" stroke-width="5" transform="matrix(1,0,0,1,1,1)" stroke-linecap="round" shape-rendering="default" style="stroke-opacity: 0.05; stroke-linecap: round;"></rect><rect x="0" y="0" width="170" height="26" r="0" rx="0" ry="0" fill="none" stroke="#404040" stroke-opacity="0.1" stroke-width="3" transform="matrix(1,0,0,1,1,1)" stroke-linecap="round" shape-rendering="default" style="stroke-opacity: 0.1; stroke-linecap: round;"></rect><rect x="0" y="0" width="170" height="26" r="0" rx="0" ry="0" fill="none" stroke="#404040" stroke-opacity="0.15000000000000002" stroke-width="1" transform="matrix(1,0,0,1,1,1)" stroke-linecap="round" shape-rendering="default" style="stroke-opacity: 0.15; stroke-linecap: round;"></rect><rect x="0" y="0" width="170" height="26" r="0" rx="0" ry="0" fill="#ffffff" stroke="#545454" stroke-opacity="1" stroke-width="1" fill-opacity="1" style=""></rect><rect x="4" y="4" width="81" height="18" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="none" fill-opacity="0.000001" stroke-width="1" style="cursor: pointer;"></rect><text x="24" y="5.5" text-anchor="start" stroke="none" fill="#000000" style="text-anchor: start; font-family: Verdana; font-size: 11px; cursor: pointer;" font-family="Verdana" font-size="11px"><tspan dy="12.078125" x="24">2015 GHG</tspan></text><path fill="url('https://localhost:44321/app_Member/sustainPlant.aspx?companyName=Chicago&amp;theYear=2016&amp;zone=AZ#61390-rgba_255_230_230_1_:0-rgba_255_230_230_1_:30-rgba_255_245_245_1_:60-rgba_255_230_230_1_:90-rgba_255_230_230_1_:100')" stroke="#998a8a" d="M7,19L7,10.600000000000001L10,10.600000000000001L10,19ZM11.5,19L11.5,7L14.5,7L14.5,19ZM16,19L16,14.2L19,14.2L19,19Z" stroke-width="0.5" opacity="1" fill-opacity="1" style="opacity: 1; fill-opacity: 1; cursor: pointer;"></path><rect x="85" y="4" width="81" height="18" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="none" fill-opacity="0.000001" stroke-width="1" style="cursor: pointer;"></rect><text x="105" y="5.5" text-anchor="start" stroke="none" fill="#000000" style="text-anchor: start; font-family: Verdana; font-size: 11px; cursor: pointer;" font-family="Verdana" font-size="11px"><tspan dy="12.078125" x="105">2016 GHG</tspan></text><path fill="url('https://localhost:44321/app_Member/sustainPlant.aspx?companyName=Chicago&amp;theYear=2016&amp;zone=AZ#61690-rgba_255_102_102_1_:0-rgba_255_102_102_1_:30-rgba_255_194_194_1_:60-rgba_255_102_102_1_:90-rgba_255_102_102_1_:100')" stroke="#993d3d" d="M88,19L88,10.600000000000001L91,10.600000000000001L91,19ZM92.5,19L92.5,7L95.5,7L95.5,19ZM97,19L97,14.2L100,14.2L100,19Z" stroke-width="0.5" opacity="1" fill-opacity="1" style="opacity: 1; fill-opacity: 1; cursor: pointer;"></path></g><g class="red-hot-485"><rect x="70.5" y="29.5" width="14" height="104" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="105.5" y="30.5" width="14" height="103" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="140.5" y="39.5" width="14" height="94" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="174.5" y="58.5" width="14" height="75" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="209.5" y="62.5" width="14" height="71" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="244.5" y="71.5" width="14" height="62" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="279.5" y="70.5" width="14" height="63" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="314.5" y="65.5" width="14" height="68" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="349.5" y="74.5" width="14" height="59" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="383.5" y="59.5" width="14" height="74" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="418.5" y="57.5" width="14" height="76" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="453.5" y="47.5" width="14" height="86" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="84.5" y="79.5" width="14" height="54" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="119.5" y="85.5" width="14" height="48" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="154.5" y="70.5" width="14" height="63" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="188.5" y="54.5" width="14" height="79" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="223.5" y="68.5" width="14" height="65" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="258.5" y="63.5" width="14" height="70" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="293.5" y="73.5" width="14" height="60" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="328.5" y="70.5" width="14" height="63" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="363.5" y="70.5" width="14" height="63" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="397.5" y="50.5" width="14" height="83" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="432.5" y="56.5" width="14" height="77" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect><rect x="467.5" y="17.5" width="14" height="116" r="0" rx="0" ry="0" fill="#c0c0c0" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" style=""></rect></g><g class="red-buttons-487"><g class="red-button-501" style=""><rect x="472.5" y="6.5" width="18" height="17" r="0" rx="2" ry="2" fill="url('https://localhost:44321/app_Member/sustainPlant.aspx?companyName=Chicago&amp;theYear=2016&amp;zone=AZ#50290-rgba_204_204_204_1_:0-rgba_255_255_255_1_:100')" stroke="#bbbbbb" stroke-width="1" opacity="1" fill-opacity="1" stroke-opacity="1" style="opacity: 1; fill-opacity: 1;"></rect><path fill="#ffffff" stroke="#9a9a9a" d="M476.5,17.5L476.5,20.5L487.5,20.5L487.5,17.5L487.5,20.5L476.5,20.5ZM481.5,19.5L478.5,15L480.5,15L480.5,9.5L482.5,9.5L482.5,15L484.5,15Z" fill-opacity="1" stroke-opacity="1" stroke-width="1" style=""></path><rect x="472.5" y="6.5" width="18" height="17" r="0" rx="2" ry="2" fill="#c0c0c0" stroke="#c0c0c0" fill-opacity="0.000001" stroke-opacity="0.000001" stroke-width="1" style="cursor: pointer;">
    </rect></g></g></svg>
OAuthClientRequest request = OAuthClientRequest
                .authorizationLocation(AUTH_URL)
                .setClientId(CLIENT_ID)
                .setRedirectURI(REDIRECT_URL)
                .setResponseType("code")
                .setScope("openid,email,profile,offline_access")
                .buildQueryMessage();

2 个答案:

答案 0 :(得分：1)

您正尝试在Range元素上设置最大宽度，此元素无法通过css设置样式。

作为解决方法，您可以使用<g>应用您的宽度，并在标签中添加另一个svg对象。

您必须使用而不是整个<foreignObejct> 

<g>

我不知道你要完成什么，但在这里你可以修改标签的宽度。对于高度，您试图在整个标签块上设置高度5px，这将使其不可见。

使用此代码，您可以根据需要设置宽度，但请记住，嵌套在svg中的所有文本元素都有自己的坐标，因此您必须正确定位它们才能达到您想要的效果。

话虽如此，我认为你想用CSS做什么应该通过jv lybrary来完成，例如svg.js或类似的。

答案 1 :(得分：0)

您可以设置元素的宽度

.red-y-axis-bands-522 {
width: 20px
}

或最大宽度

.red-y-axis-bands-522 {
max-width: 20px
}

如果这不起作用，那么此元素中的内容可能会溢出元素之外。但是，为了提供更完整的答案，我们需要查看比您提供的代码更多的代码。

相关问题
最新问题