Briefly: The situation is I would like use svg icons, but google's components iron-icons with iron-iconset-svg don't should me control svg in css. Is there better solution?
More: I have many svgs, like: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px" viewBox="0 0 19.8 19.8" style="enable-background:new 0 0 19.8 19.8;" xml:space="preserve"> <style type="text/css"> .st0{fill:#201600;} .st1{fill:none;stroke:#201600;stroke-width:1.1;stroke-miterlimit:10;} </style> <g> <rect x="3.4" y="7.5" class="st0" width="4.4" height="4.1"/> <rect x="3.4" y="3" class="st0" width="13.1" height="2.6"/> <line class="st1" x1="9.2" y1="8.1" x2="16.5" y2="8.1"/> <line class="st1" x1="9.2" y1="8.1" x2="13.7" y2="8.1"/> <line class="st1" x1="9.2" y1="11" x2="12.4" y2="11"/> <line class="st1" x1="3.4" y1="13.9" x2="14.1" y2="13.9"/> <line class="st1" x1="3.4" y1="16.8" x2="13.1" y2="16.8"/> </g> </svg> How you can see, svg colored stroke and fill with classes (.st0, .st1 ...there is another). This svg locates in icon-svgset, for example: <link rel="import" href="/components/iron-icon/iron-icon.html"> <link rel="import" href="/components/iron-iconset-svg/iron-iconset-svg.html"> <iron-iconset-svg name="lms-comment" size="28.4"> <svg> <defs> <g id="check"> <path fill="none" stroke="#A9D3B0" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M20.4 10l-6 7.4-3.4-3.3"/> <path d="M20.4 13.5v.6c0 3.5-2.8 6.3-6.3 6.3s-6.3-2.8-6.3-6.3 2.8-6.3 6.3-6.3c1.5 0 2.8.5 3.9 1.3" fill="none" stroke="#A9D3B0" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/> </g> <g id="comment"> <g fill="none" stroke="#000" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"> <path d="M11.8 19.5c-.4-.6-.7-.9-1-1.9-.4-1.6-1.3-2.2-1.4-4-.2-2.4 1.4-4.6 3.8-5.1 3-.5 5.6 1.7 5.6 4.6 0 2-.9 2.7-1.4 4.4-.3 1.1-.6 1.4-1 2h-4.6zm.2-6c-.1-1.1.6-2.1 1.7-2.3"/> <path d="M11.8 19.4s.3 2.1.5 2.6c.1.2.3.4.6.4h2.6c.3 0 .5-.2.6-.4.2-.5.5-2.6.5-2.6"/> <path d="M14.2 24h.6c.3 0 .5-.1.6-.4.1-.3.5-1.4.5-1.4M14.1 24h-.6c-.3 0-.5-.1-.6-.4-.1-.3-.5-1.4-.5-1.4m1.8-15.9V4.4m3.6 2.7l.8-1.5m1.7 4.1l1.6-.9m-.6 4.5H23M10.6 7.1l-.9-1.5M8 9.7l-1.5-.9m.6 4.5H5.3"/> </g> </g> </defs> </svg> </iron-iconset-svg> And added on page <div class="know-article_comm"> <iron-icon class="know-article_bottom_icon" icon="lms-comment:comment"></iron-icon> <span class="know-article_comm_text">15</span> </div> That did not work css style if I want change color when div.know-article_comm hovered, like .know-article_comm:hover svg{ fill: #newColor; stroke: #newColor; } Ok, maybe refactor svg, and delete integrated styles, and add classes for elements that should be colored (filled ar stroked), example: <link rel="import" href="/components/iron-icon/iron-icon.html"> <link rel="import" href="/components/iron-iconset-svg/iron-iconset-svg.html"> <iron-iconset-svg name="lms-knowledge-base" size="20"> <svg> <defs> <g id="addmaterial"> <style type="text/css"> .st0{fill:none;stroke-width:1.1;stroke-linejoin:round;stroke-miterlimit:10;} </style> <g> <g> <line class="st0 stroke-colored" x1="13.2" y1="9.9" x2="6.6" y2="9.9"/> <line class="st0 stroke-colored" x1="9.9" y1="13.2" x2="9.9" y2="6.6"/> </g> <circle class="st0 stroke-colored" cx="9.9" cy="9.9" r="6.4"/> </g> </g> <g id="all"> <style type="text/css"> .st0{} .st1{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} </style> <g> <circle class="st0 fill-colored" cx="4.4" cy="5.6" r="1"/> <circle class="st0 fill-colored" cx="4.4" cy="9.9" r="1"/> <circle class="st0 fill-colored" cx="4.4" cy="14.2" r="1"/> <line class="st1 stroke-colored" x1="16.5" y1="5.6" x2="7.2" y2="5.6"/> <line class="st1 stroke-colored" x1="16.5" y1="9.9" x2="7.2" y2="9.9"/> <line class="st1 stroke-colored" x1="16.5" y1="14.3" x2="7.2" y2="14.3"/> </g> </g> <g id="article"> <style type="text/css"> .st0{} .st1{fill:none;stroke-width:1.1;stroke-miterlimit:10;} </style> <g> <rect x="3.4" y="7.5" class="st0 fill-colored" width="4.4" height="4.1"/> <rect x="3.4" y="3" class="st0 fill-colored" width="13.1" height="2.6"/> <line class="st1 stroke-colored" x1="9.2" y1="8.1" x2="16.5" y2="8.1"/> <line class="st1 stroke-colored" x1="9.2" y1="8.1" x2="13.7" y2="8.1"/> <line class="st1 stroke-colored" x1="9.2" y1="11" x2="12.4" y2="11"/> <line class="st1 stroke-colored" x1="3.4" y1="13.9" x2="14.1" y2="13.9"/> <line class="st1 stroke-colored" x1="3.4" y1="16.8" x2="13.1" y2="16.8"/> </g> </g> <g id="booksummary"> <style type="text/css"> .st0{fill:none;stroke-miterlimit:10;} </style> <g> <polyline class="st0 stroke-colored" points="10.2,17.3 16.7,14.8 16.7,2.1 13.4,3.3 10.2,4.6 "/> <polyline class="st0 stroke-colored" points="9.7,17.3 3.2,14.8 3.2,2.1 6.4,3.3 9.7,4.6 "/> <line class="st0 stroke-colored" x1="10" y1="4.1" x2="10" y2="17.7"/> <polyline class="st0 stroke-colored" points="15,5.6 13.4,6.2 11.8,6.8 "/> <polyline class="st0 stroke-colored" points="15,8.1 13.4,8.7 11.8,9.3 "/> <polyline class="st0 stroke-colored" points="4.8,5.6 6.4,6.2 8,6.8 "/> <polyline class="st0 stroke-colored" points="4.8,8.1 6.4,8.7 8,9.3 "/> </g> </g> <g id="conference"> <style type="text/css"> .st0{} .st1{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-miterlimit:10;} </style> <g> <rect x="2.9" y="1.8" class="st0 fill-colored" width="14.1" height="1.2"/> <line class="st1 stroke-colored" x1="9.9" y1="13.6" x2="9.9" y2="18"/> <g> <line class="st1 stroke-colored" x1="7.8" y1="13.6" x2="4.3" y2="17.3"/> <line class="st1 stroke-colored" x1="12" y1="13.6" x2="15.6" y2="17.3"/> </g> <g> <path class="st0 fill-colored" d="M15.4,5.4v5.8h-11V5.4H15.4 M16.4,4.4h-13v7.8h13V4.4L16.4,4.4z"/> </g> </g> </g> </defs> </svg> </iron-iconset-svg> Ok, now I can type like this: .know-article_comm svg .fill-colored{ fill: #oldColor; } .know-article_comm svg .stroke-colored{ fill: #oldColor; } .know-article_comm:hover svg .fill-colored{ fill: #newColor; } .know-article_comm:hover svg .stroke-colored{ fill: #newColor; } And this work! But! It work only shady dom! I can't styled svg in shadow dom. Please, help. It's first thinks I thought about: 1) Use no-component method 2) Create my own component (with blackjack, and ...), but I will collide with how to transmit :hover to attribute new component without complication outer js logik (ex. main.js); Maybe anybody met with this situation, help!) P.S. If you don't understand somethink, sorry. I have some problems with language. Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/6ef1b4b4-6704-4ce3-b765-a5d64a5ed947%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
